时间戳

首页 > 解决方案 > 如何找到在 Inspector>Network（网络抓取）上执行的特定事件？

javascript - 如何找到在 Inspector>Network（网络抓取）上执行的特定事件？

问题描述

我一直在使用以下YOUTUBE TUTORIAL来学习如何使用网络抓取。由于特定的网站改变了它们的核心结构，我已经设法完成了一些修改的教程。本教程使用的代码可以在这里找到：https ://github.com/beaucarnes/fcc-p​​roject-tutorials/blob/master/node-web-scraping/index.js 。现在我想修改这段代码，以便它可以与我的目标一起工作：

“使用来自另一个网站ec.europa.eu的搜索引擎，并尝试将该页面中的数据（即 JOB-TITLE）返回到我的 NODE 控制台。”

在 YouTube 教程中，调用来检索数据的事件是由演示者指定的，但实际上并没有解释他是如何使用它的。在我要检索信息的网站中，该页面上调用了 390 个事件。我想确定Request-URL提交时搜索引擎调用的内容。截图如下：

演示 1

演示 2

我已经搜索了这些事件，并试图找到搜索引擎调用的事件。我在图中突出显示了对我来说更有意义的事件名称，但我不确定是否是这种情况。

我还尝试Request-URL在 Stack Overflow 的搜索引擎中找到调用的事件 ( )，但找不到从 Inspector>Networks 调用的 JS 事件。

我的目标是确定在任何网站中调用的特定事件。任何信息都会非常感谢，谢谢！:D

更新：

const cheerio = require('cheerio');
const Table = require('cli-table');
const rp = require('request-promise');

const talbe = new Table({
    head: ['Job Title', 'URL']
});


const options = {
    url: 'https://ec.europa.eu/eures/eures-searchengine/page/jv-search/search?lang=en&app=2.4.1-build-2',
    json: true
}

rp(options).then(
    (data) => {
        console.log("DONE");
    }
).catch(
    (err) => {
        console.log(err);
    }
);

这将返回以下错误：

StatusCodeError: 500 - undefined
    at new StatusCodeError (C:\Users\loizo\Desktop\eures_test\node_modules\request-promise-core\lib\errors.js:32:15)
    at Request.plumbing.callback (C:\Users\loizo\Desktop\eures_test\node_modules\request-promise-core\lib\plumbing.js:104:33)        
    at Request.RP$callback [as _callback] (C:\Users\loizo\Desktop\eures_test\node_modules\request-promise-core\lib\plumbing.js:46:31)
    at Request.self.callback (C:\Users\loizo\Desktop\eures_test\node_modules\request\request.js:185:22)
    at Request.emit (events.js:315:20)
    ....

标签： javascriptjquerynode.jsweb-scraping

解决方案

您快到了，在网络工具中，您可以操纵概览以查看请求的片段。打开站点的网络工具，确保您先清除所有请求。然后进行搜索。

亲自向您展示或观看视频要容易得多。但这里有一组图像可指导您查看在网站上执行操作时发出的请求的特定部分。

请参阅此处的图像。我已经在下面单独解释了它们

图片1：

  • 在这里，我已经加载了您提供的页面并单击了检查和网络选项卡。
  • 我正在单击您可以看到的红色按钮以清除服务器的所有这些请求。

图片2：

  • 这是您清除请求时的样子

图片3：

  • 我已经搜索了开发人员，您可以在下面看到此操作的请求。

图片4：

  • 现在在概览中，您可以选择该操作的请求/响应的一部分。在这里，我正在磨练该行动的第一部分。您只需单击并拖动即可。自己感受一下。
  • 我现在可以在下面看到这 5 个请求
  • 前四个请求是 GET 请求，并没有真正告诉我们太多
  • 第五个请求是一个 POST 请求，这是一个发布数据的请求，图像右侧的信息将告诉您它发布到哪里以及它得到什么响应。

图5

  • 这是与以前相同的图像，但我向下滚动了一点以查看有效负载。这是需要与 POST HTTP 请求一起在此网站上进行搜索的关键内容。

编码示例

注意我帖子上的评论。下面是一个获取所需 JSON 数据的代码示例。

我从未在 node.js 中编码过的项圈，所以请注意这一点！但是它确实有效。

const cheerio = require('cheerio');
const Table = require('cli-table');
const rp = require('request-promise');

const talbe = new Table({
    head: ['Job Title', 'URL']
});


const options = {
    method: 'POST',
    url: 'https://ec.europa.eu/eures/eures-searchengine/page/jv-search/search?lang=en&app=2.4.1-build-2',
    json: true,
    body: {
        "keywords":[{"keyword":"developer","specificSearchCode":"EVERYWHERE"}],"positionScheduleCodes":[],"positionOfferingCodes":[],"educationLevelCodes":[],"euresFlagCodes":[],"nutsCodes":[],"notSpecifiedInNutsCodes":[],"requiredExperienceCodes":[],"solidarityContextCodes":[],"otherBenefitsCodes":[],"occupationUris":[],"includeJobsWithoutBenefits":false,"requiredLanguages":[],"includeJobsWithoutRequiredLanguages":false,"sortSearch":"BEST_MATCH","resultsPerPage":10,"page":1,"sessionId":"g07h0s8tfmmtfr5u9lible"
    },
    headers: {
        'Connection': 'keep-alive',
        'ajax-call': 'true',
        'Accept': 'application/json, text/plain, */*',
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36',
        'Content-Type': 'application/json;charset=UTF-8',
        'Origin': 'https://ec.europa.eu',
        'Sec-Fetch-Site': 'same-origin',
        'Sec-Fetch-Mode': 'cors',
        'Sec-Fetch-Dest': 'empty',
        'Referer': 'https://ec.europa.eu/eures/eures-searchengine/page/main?lang=en',
        'Accept-Language': 'en-US,en;q=0.9',
        }
    
}

rp(options).then(
    (data) => {
        console.log("Got results =", data);
    }
).catch(
    (err) => {
        console.log(err);
    }
);

解释

在添加您自己的代码方面，我已经指定我们正在执行 POST 请求。

要获得发出成功 HTTP 请求所需的其他内容，您可以右键单击网络工具中的请求，有很多选项，但您可以将其复制到 CURL(bash)。我使用https://curl.trillworks.com/来转换 curl 命令。您可以选择 node.js。

我复制了该网站上的标题。

应该包含我们的body {}有效负载，在这种情况下，我复制了 curl.trillworks 上的数据字符串。

我得到了想要的输出。

附加信息

  1. 逆向工程 HTTP 请求是关于模仿请求，让服务器相信你不是机器人。
  2. 您可以尝试只向服务器发出请求，而无需发布任何其他内容，在这种情况下它不起作用，您会收到状态代码 500 错误。
  3. 您必须考虑模仿请求所需的标头、任何 cookie 和参数。
  4. 在这里，您只需要标题和参数（即您在此网站上进行搜索时所做的搜索词）
  5. 请记住，它是一个 POST HTTP 请求，您正在提供服务器信息并期望基于该帖子的响应。

附加链接

请求文档：https ://www.npmjs.com/package/request-promise

这有助于编写 JSON 请求。没有完全解释 body 参数可以包含我们想要的任何数据。我迈出了那一步，它奏效了。

https://beshaimakes.com/js-scrape-data#case-1--using-apis-directly

仅用于额外的抓取以及关于 JSON 抓取的 abit。没有完全解释它的标题部分，但希望通过这个例子你可以跟随。

https://stackabuse.com/the-node-js-request-module/

在我让你的代码工作后发现这个对我了解请求库很有用。

推荐阅读