ajax - 如何在 Chrome 开发者工具中捕获特定的 AJAX (XHR) 事件?

标签 ajax google-chrome post

我正在尝试从美国邮政服务的 Every Door Direct Mail 服务中抓取一些信息。服务很简单。在 the USPS EDDM website ,用户输入邮政编码,例如10030,点击搜索按钮,显示 map 。 该调用很容易在浏览器开发人员控制台中捕获。这只是一个像这样的 GET 请求:

https://gis.usps.com/arcgis/rest/services/EDDM/selectZIP/GPServer/routes/execute?f=json&env:outSR=102100&ZIP=10030&Rte_Box=R&UserName=EDDM

但是,问题在于试图捕获页面右侧显示的表格或文本信息。 “显示表格”选项:

enter image description here

像这样显示输出,此时您可以单击“全选(10 条路线)”,它会在页面右侧显示如下内容:

enter image description here

我如何捕获这组 Javascript“按钮单击”请求?现在我只是 try catch 这些请求,以便我可以以编程方式复制它们(在 Python 中,但这不是严格意义上的此处相关)。

enter image description here

最佳答案

看起来您需要发出两个 GET 请求才能获取所有数据。第二个请求是获取邮政信箱总数所必需的。也许它们可以合二为一,我没有深究。

  1. https://gis.usps.com/arcgis/rest/services/EDDM/selectZIP/GPServer/routes/execute?f=json&env%3AoutSR=102100&ZIP=10030&Rte_Box=R&UserName=EDDM
  2. https://gis.usps.com/arcgis/rest/services/EDDM/selectZIP/GPServer/boxes/execute?f=json&env%3AoutSR=102100&ZIP=10030&Rte_Box=B&UserName=EDDM&extent=%7B%22xmin %22%3A-15628202.596646052%2C%22ymin%22%3A749662.6717286934%2C%22xmax%22%3A-6235620.560966092%2C%22ymax%22%3A7070087.666571667%2C%22ymax%22%3A7070087.666571wkiB2%2patial3Reference%22s %3A102100%7D%7D

我知道您使用的是 Python,但由于您使用的是 Chrome DevTools,这里有一个 JavaScript 示例,说明如何获取送货地址总数:

let promises = [
    fetch('https://gis.usps.com/arcgis/rest/services/EDDM/selectZIP/GPServer/routes/execute?f=json&env%3AoutSR=102100&ZIP=10030&Rte_Box=R&UserName=EDDM'),
    fetch('https://gis.usps.com/arcgis/rest/services/EDDM/selectZIP/GPServer/boxes/execute?f=json&env%3AoutSR=102100&ZIP=10030&Rte_Box=B&UserName=EDDM&extent=%7B%22xmin%22%3A-15628202.596646052%2C%22ymin%22%3A749662.6717286934%2C%22xmax%22%3A-6235620.560966092%2C%22ymax%22%3A7070087.666571667%2C%22spatialReference%22%3A%7B%22wkid%22%3A102100%7D%7D')
];

Promise.all(promises)
    .then(async res => {
        if (res[0].ok && res[1].ok) {
            const first = await res[0].json();
            const second = await res[1].json();

            const results = [...first.results[0].value.features, ...second.results[0].value.features];
            
            console.log("Total Residential Addresses:", results.reduce((acc, row) => acc + row.attributes.RES_CNT, 0));
            console.log("Total Business Addresses:", results.reduce((acc, row) => acc + row.attributes.BUS_CNT, 0));
            console.log("Total Delivery Addresses:", results.reduce((acc, row) => acc + row.attributes.TOT_CNT, 0));
        }
    });

已更新以显示如何分别检索住宅和公司地址。

关于ajax - 如何在 Chrome 开发者工具中捕获特定的 AJAX (XHR) 事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64829016/

相关文章:

php - Ajax 端点应如何响应非 ajax 请求?

javascript - 如何使用 JavaScript 从 BING map API 获取地址(城市、州、国家、邮政编码)?

.net - 带有页面刷新和书签的 ASP.NET ViewState 回发

ruby-on-rails - 为什么发送空 POST 请求时会出现内部错误 500

javascript - AJAX+Laravel : after I successfully do process in AJAX, 其他功能无法使用

javascript - 更新 Angular2 中的 View

html - CSS 相对元素阻碍 float

javascript - chrome 内容脚本 : window. postMessage() "message"事件不包含 "source"属性

javascript - React JS 错误行报告不准确

python - python post server是否有更好的方法来处理不同的文件类型?