ajax - 当我在 Nightmarejs 中单击 ajax 时如何使用回调

Question

最近我一直在研究 Nightmare 模块，我认为它非常简单且有用，但我有疑问。

点击ajax按钮时如何使用回调

我的代码

var Nightmare = require('nightmare'),
    nightmare = Nightmare();

nightmare
.goto('https://motul.lubricantadvisor.com/Default.aspx?data=1&lang=ENG&lang=eng')
.click('input[title="Cars"]')
.wait(1000)
.evaluate(function () {
    //return $('#ctl00_ContentPlaceHolder1_lstModel option');
    var links = document.querySelectorAll('#ctl00_ContentPlaceHolder1_lstMake option');
    return [].map.call(links, function (e) {
        return {value: e.value, name: e.text};
    });
})
.end()
.then(function (items) {
    console.log(items);
});

有等待方法。大多数人使用等待方法我在谷歌上搜索

.wait(1000)

我不使用等待方法。因为如果网络断开或速度慢。这不是一个好的代码

你能帮我回调方法吗？

谢谢。所以我有主题代码，但它不起作用

var Nightmare = require('nightmare'),
    nightmare = Nightmare();

nightmare
.goto('https://motul.lubricantadvisor.com/Default.aspx?data=1&lang=ENG&lang=eng')
.click('input[title="Cars"]')
.wait('#result > #ctl00_ContentPlaceHolder1_lstMake option')
.evaluate(function () {
    $(document).ajaxSuccess(function () {
         var links = document.querySelectorAll('#ctl00_ContentPlaceHolder1_lstMake option');
         return [].map.call(links, function (e) {
            return {value: e.value, name: e.text};
        });
    });
})
.end()
.then(function (items) {
    console.log(items);
});

Answer 1

有很多方法可以解决这个问题。最简单的如下。

假设当 Ajax 请求完成时，它总是会更改页面上的某些内容。当等待 CSS 选择器可以匹配的特定元素出现时，可以轻松检测到大多数这些更改。

假设您单击某个内容，结果被写入与 "#result" 匹配的元素中。如果点击之前不存在这样的元素，那么您可以等到该元素存在为止:

.click("button")
.wait("#result")
// TODO: do something with the result

您还可以使用 CSS 选择器来计数。例如，假设有十个元素可以与 "#result > a" 匹配。如果一次点击又增加了 10 个，那么您可以使用以下方法等待第 20 个:

.click("button")
.wait("#result > a:nth-of-type(20)")
// TODO: do something with the result

CSS 选择器的世界相当大。

<小时/>

当然，您可以使用evaluate来添加通用Ajax事件处理程序，例如$(document).ajaxSuccess(fn)每当某个回调完成时就会收到通知，但页面的源代码一直在变化。如果您查找可以在 DOM 中看到的结果，那么维护代码会更容易。