如何在Chrome开发者工具中捕获特定的AJAX（XHR）事件？

Question

如何在Chrome开发者工具中捕获特定的AJAX（XHR）事件？

3

我将为您翻译以下内容，涉及编程和相关领域：

我正在尝试从美国邮政服务的Every Door Direct Mail服务中获取一些信息。该服务很简单。在 USPS EDDM网站上，用户输入邮政编码，例如10030，点击搜索按钮，然后显示地图。在浏览器开发者控制台中捕获该调用很容易。这只是一个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

问题在于如何捕获页面右侧显示的表格或文本信息。 "显示表格" 选项：

显示的输出如下，此时您可以点击“选择全部（10条路线）”，然后它会在页面右侧显示类似以下内容：

我该如何捕获这组 JavaScript 的“按钮点击”请求？目前，我只是想捕获这些请求，以便可以在程序中复现它们（用 Python 编写，但这并不严格相关）。

- Michael A

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brian Burton · Accepted Answer

看起来你需要发起两个GET请求才能获取所有数据。第二个请求是为了获取所有PO Box的总数。也许它们可以合并成一个请求，但我没有深入研究。

https://gis.usps.com/arcgis/rest/services/EDDM/selectZIP/GPServer/routes/execute?f=json&env%3AoutSR=102100&ZIP=10030&Rte_Box=R&UserName=EDDM
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

我知道你正在使用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));
        }
    });

更新以展示如何分别检索住宅和商业地址。