【问题标题】:How do I capture a specific AJAX (XHR) event in the Chrome Developer Tools?如何在 Chrome 开发人员工具中捕获特定的 AJAX (XHR) 事件?
【发布时间】:2021-02-25 22:33:09
【问题描述】:

我正在尝试从美国邮政服务的 Every Door Direct Mail 服务中获取一些信息。服务很简单。在the USPS EDDM website 上,用户输入邮政编码,例如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 中,但这并不严格相关)。

【问题讨论】:

    标签: ajax google-chrome post


    【解决方案1】:

    看起来您需要发出两个 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%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));
            }
        });
    

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

    【讨论】:

    • 谢谢。您是如何计算出第二个 GET 请求的?我必须修改它,因为我不仅要查找邮政信箱的总数,还要查找住宅和/或商业地址的总数以及表中的其他数据。大概当我在 Python 中执行此操作时,我必须在同一个会话中发出两个 GET 请求?第二个是否以某种方式依赖第一个?
    • 如果您在 Network 面板的 XHR 选项卡中查看请求,您将看到两个请求一个接一个。这两个请求不相互依赖,一个指向.../GPServer/routes,另一个指向../GPServer/boxes。该表中的所有数据都在 results[0].value.features.attributes 属性中这两个调用的响应中。看起来 BUS_CNT 是企业,而 RES_CNT 是住宅。
    猜你喜欢
    • 1970-01-01
    • 2016-10-15
    • 2017-01-27
    • 2019-12-12
    • 2016-04-20
    • 1970-01-01
    • 2015-12-04
    • 1970-01-01
    • 2019-07-09
    相关资源
    最近更新 更多