javascript - 等待来自 CasperJS 中选择的 字段的 AJAX 响应

转载 作者：行者123 更新时间：2023-11-30 07:08:11 25 4

我想使用 CasperJS 来抓取这个网站: http://www.agoda.com/hotel-des-arts-saigon-mgallery-collection/hotel/ho-chi-minh-city-vn.html?checkin=2015-11-14&los=2&adults=2&childs=0&rooms=1

我想通过 CasperJS 更改货币选项。但是，货币选项包含在 <select></select> 中。未嵌入表单的标签。当我随后阅读表格时，它显示了旧货币的价格。当货币更改时，价格通过 AJAX 加载。

如何使用 CasperJS？

这是我的代码:

var casper = require("casper").create({
    verbose: true,
    logLevel: 'error',
    pageSettings: {
        loadImages: false,
    }
});

   var utils = require('utils');

    var url = 'http://www.agoda.com/hotel-des-arts-saigon-mgallery-collection/hotel/ho-chi-minh-city-vn.html?checkin=2015-11-14&los=4&adults=2&childs=0&rooms=1';

    var names = [];
    var prices = [];
    var currency = [];


    function getName() {
        var rows = document.querySelectorAll('table#room-grid-table tbody tr td:first-child .info-container .room-name span');
        return Array.prototype.map.call(rows, function(e) {
            return e.innerHTML;
        });
    }

    function getPrice() {
        var price = document.querySelectorAll('table#room-grid-table tbody tr td:nth-child(3) .price span.sellprice');
        return Array.prototype.map.call(price, function(e) {
            return e.innerHTML;
        });
    }

    casper.start(url, function() {
        this.echo(this.getTitle());
    });

    casper.then(function() {
        this.click('select[id="currency-options"]');
    });

    casper.then(function() {
        this.click('option[value="AED"]');
    });

    casper.then(function() {
        names = this.evaluate(getName);
        prices = this.evaluate(getPrice);
    });

    casper.then(function() {
        utils.dump(names);
        utils.dump(prices);
    })

    casper.run();

选择框:

<select id="currency-options" data-selenium="room-currency">
    <option value="AED">Arab Emirates Dirham (AED)</option>
    <option value="ARS">Argentine Peso (ARS)</option>
    ...
    <option value="USD" selected="">US Dollar (USD)</option>
</select>

表格:

<table id="room-grid-table">
    <tbody data-selenium="room-tbody" data-prebook-url="/NewSite/en-us/Hotel/Prebook/929399">
        <tr>
            <td>...</td>
            <td>...</td>
            <td>
                <div class="price" data-selenium="price">
                    <span class="currency" data-selenium="price-currency">USD</span>
                    <span class="crossout show-cor-tooltip">288.75</span>
                    <span class="sellprice">187.11</span>
                </div>
            </td>
        </tr>
        <tr>...</tr>
        ...
    </tbody>
</table>

最佳答案

单击选择框的选项字段几乎不起作用，因为它不是 PhantomJS 中的可单击 UI 元素。您必须通过 DOM 以编程方式选择所需的选项。例如，这可以通过将 selectElement.selectedIndex 属性设置为正确的索引来完成。设置好后，需要触发select元素的change事件，否则不会向服务器发送AJAX请求。

这是从我的 other answer 复制的代码:

casper.selectOptionByValue = function(selector, valueToMatch){
    this.evaluate(function(selector, valueToMatch){
        var select = document.querySelector(selector),
            found = false;
        Array.prototype.forEach.call(select.children, function(opt, i){
            if (!found && opt.value.indexOf(valueToMatch) !== -1) {
                select.selectedIndex = i;
                found = true;
            }
        });
        // dispatch change event in case there is some kind of validation
        var evt = document.createEvent("UIEvents"); // or "HTMLEvents"
        evt.initUIEvent("change", true, true);
        select.dispatchEvent(evt);
    }, selector, valueToMatch);
};

更改货币设置后需要等待AJAX​​请求完成。这可以通过不同的方式完成:

• 静态等待时间 有效，但等待时间可能比请求需要的时间长:

  casper.wait(5000);
  

• 等待特定选择器出现效率更高，因为一旦找到选择器它就会继续控制流。例如，您可以等待表中的货币文本发生变化。这可以使用 XPath 轻松完成:

  var x = require('casper').selectXPath;
  var currency = 'AED';
  ...
  casper.waitForSelector(x("//*[@id='room-grid-table']//*[@class='currency' and contains(text(), '"+currency+"')]"));
  

• 您可以等待特定选择器中的文本更改，例如表中的货币。如果更改是即时的，这将不起作用，因为 CasperJS 需要一点时间来接受更改。 20ms 应该足够了。

  casper.waitForSelectorTextChange("#room-grid-table .currency");
  

• 等待 AJAX 响应，它通过查看所有收到的资源来工作:

  casper.waitForResource("Main/GetRoomTypeDetailList").wait(50);
  

---

版本 2 的完整脚本:

var casper = require("casper").create({
    verbose: true,
    logLevel: 'error',
    pageSettings: {
        loadImages: false,
    }
});

var utils = require('utils');
var x = require('casper').selectXPath;

var url = 'http://www.agoda.com/hotel-des-arts-saigon-mgallery-collection/hotel/ho-chi-minh-city-vn.html?checkin=2015-11-14&los=4&adults=2&childs=0&rooms=1';

var names = [];
var prices = [];
var currency = [];


function getName() {
    var rows = document.querySelectorAll('table#room-grid-table tbody tr td:first-child .info-container .room-name span');
    return Array.prototype.map.call(rows, function(e) {
        return e.innerHTML;
    });
}

function getPrice() {
    var price = document.querySelectorAll('table#room-grid-table tbody tr td:nth-child(3) .price span.sellprice');
    return Array.prototype.map.call(price, function(e) {
        return e.innerHTML;
    });
}

casper.selectOptionByValue = function(selector, valueToMatch){
    this.evaluate(function(selector, valueToMatch){
        var select = document.querySelector(selector),
            found = false;
        Array.prototype.forEach.call(select.children, function(opt, i){
            if (!found && opt.value.indexOf(valueToMatch) !== -1) {
                select.selectedIndex = i;
                found = true;
            }
        });
        // dispatch change event in case there is some kind of validation
        var evt = document.createEvent("UIEvents"); // or "HTMLEvents"
        evt.initUIEvent("change", true, true);
        select.dispatchEvent(evt);
    }, selector, valueToMatch);
};

casper.start(url, function() {
    this.echo(this.getTitle());
});

var currency = 'AED';
casper.then(function() {
    this.selectOptionByValue('select[id="currency-options"]', currency);
});

casper.waitForSelector(x("//*[@id='room-grid-table']//*[@class='currency' and contains(text(), '"+currency+"')]"));

casper.then(function() {
    names = this.evaluate(getName);
    prices = this.evaluate(getPrice);
});

casper.then(function() {
    utils.dump(names);
    utils.dump(prices);
})

casper.run();

关于javascript - 等待来自 CasperJS 中选择的 <select> 字段的 AJAX 响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32963311/

25 4 0

文章推荐： Java事务: how to stop program after rollback?

文章推荐： Javascript:创建 UTF-16 文本文件？

文章推荐： javascript - 设置 cookie 一天后过期

文章推荐： javascript - 变量作为对象键在 IE 中不起作用

• ajax - Comet, Ajax Push, Reverse Ajax

  有人有 Comet 应用程序 .net 的任何样本吗？ 我需要一个示例如何在服务器中保持客户端的连接？ 最佳答案 这里也有一些不错的: http://www.frozenmountain.com/we

• ajax - Yii2:ajax 提交表单上的 ajax 表单验证

  我想知道是否有 Yii2 专家可以帮助我了解如何最好地使用 ajax 表单与 Yii ajax 验证相结合。我想我可以在不带您阅读我所有代码的情况下解释这个问题。 我正在处理一个促销代码输入表单，用户

• ajax - Ajax 和 Jquery-Ajax 之间的区别

  已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 要求提供代码的问题必须表现出对所解决问题的最低限度的了解。包括尝试的解决方案、为什么它们不起作用以及预期结果

• ajax - f :ajax and a4j:ajax? 和有什么区别吗

  f:ajax 和 a4j:ajax 标记之间有什么显着差异吗？ 我知道 Richfaces 4 中的 a4j:ajax 基于 native f:ajax JSF2 标记，添加了一些 f:ajax 中未

• ajax - 在 $.ajax() 中将数组传递给 ajax 请求

  我已经尝试过这样但无法获取数组列表。它返回“null” var data=[]; data[0] = '1'; data[1] = '2'; $.ajax({

• ajax - jQuery.ajax 和 $.ajax 是一样的吗？

  在教程中可以看到 jQuery.ajax 和 $.ajax 喜欢这里 http://www.thekludge.com/form-auto-save-with-jquery-serialize/ jQ

• ajax - Ajax 会降低性能吗？

  过度使用 AJAX 会影响性能吗？在大型 Web 应用程序的上下文中，您如何处理 AJAX 请求以控制异步请求？ 最佳答案 过度使用任何东西都会降低性能；在必要时使用 AJAX 将提高性能，特别是如果

• ajax - 使用 Ext.Ajax.request 的跨域 Ajax

  似乎我无法使用 Ext.Ajax.request 进行跨域 ajax 调用。看起来 ScriptTag: True 没有任何效果。 这是我的代码: {

• ajax - AJAX 调用后的渲染问题

  我正在使用 Bottle 微框架(但我怀疑我的问题来自它) 首先，如果我定义了一个从/test_redirect 到/x 的简单重定向，它会起作用。所以 Bottle redirect() 在简单的情

• ajax - Ajax 库的比较

  任何人都可以指出各种 AJAX 库的统一比较吗？我已经阅读了大约十几种不同的书，我即将开始一个项目，但我对自己是否已经探索了可能性的空间没有信心。 请注意，我不是在要求“我认为 XXX 很棒”——我正

• ajax - 哪些情况下不应使用 AJAX？

  似乎使用 AJAX 的站点和应用程序正在迅速增长。使用 AJAX 的主要原因之一可能是增强用户体验。我担心的是，仅仅因为项目可以使用 AJAX，并不意味着它应该。 可能是为了 UX，AJAX 向站点/

• ajax - ajax 页面的永久链接最佳实践

  假设我有一个可以通过 Javascript 自定义的“报告”页面。假设我有可以更改的 start_date、end_date 和类型(“简单”或“完整”)。现在 我希望地址栏始终包含当前(自定义) V

• ajax - 我是否正确理解了 Ajax？

  我一直在阅读 Ajax 并且希望从 stackoverflow 社区看到我是否正确理解所有内容。 因此，正常的客户端服务器交互是用户在 url 中拉出 Web 浏览器类型，并将 HTTP 请求发送到服

• ajax - AJAX 可以提交基本身份验证的凭据吗？

  这可能有点牵强，但让我们假设我们需要它以这种方式工作: 我在服务器的 web 根目录中有一个 index.html 文件。该文件中的 javascript 需要向/secure/ajax.php 发出

• ajax - AJAX 检查用户名功能的安全性

  关闭。这个问题是opinion-based .它目前不接受答案。 想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 去年关闭。 Improve this

• ajax - Ajax 发布后重定向

  我希望ajax post成功进入主页。由于某种原因，我一直做错事。知道我应该做什么来解决这个问题吗？ window.APP_ROOT_URL = ""; Ajax $.ajax({ url: '#{a

• ajax - Jquery 在第一个 ajax 函数调用完全完成后继续另一个 ajax 函数

  我在 2 个不同的函数中有 2 个 ajax 调用。我想用.click来调用这2个函数。 func1 将数据插入数据库，然后 func2 检索数据，所以我的问题是如何等到 func1 完全完成然后只执

• ajax - AJAX 请求时禁用按钮

  我试图在单击按钮后禁用该按钮。我尝试过: $("#ajaxStart").click(function() { $("#ajaxStart").attr("disabled", true);

• ajax - RAILS 6 Ajax 事件和 Ajax Spinner

  我试图在每个 Ajax 请求上显示加载动画/微调器 我的 application.js $(document).on("turbolinks:load", function() { window.

• ajax - ajax settimeout刷新div

  我正在显示使用jQplot监视数据的图形。 为了刷新保存该图的div，我每5秒调用一次ajax调用(请参见下面的JavaScript摘录)。 在服务器上，PHP脚本从数据库中检索数据。 成功后，将在5

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

• html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
• JMeter 在响应断言中使用 span 标签的问题
• html - 在 :hover and :active? 上具有不同效果的 CSS 动画
• html - 相对于居中的 html 内容固定的 CSS 重复背景？

滴滴打车优惠券免费领取

全站热门文章

• .NET中的线程安全数据结构
• 夜莺v8第一个版本来了，开始做有意思的功能了
• .NET9增强OpenAPI规范，不再内置swagger
• 推荐一个C#轻量级矢量图形库
• 用于航空发动机故障诊断的深度分层排序网络
• 跟着8.6kStar的开源数据库，搞RAG！
• manim边学边做--同伦变换
• 深入理解Servlet：从基础概念到高级特性与实战应用
• VisualStudio-API调试与测试工具之HTTP文件
• 经典区间线段树详解：从原理到实践

Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com