如何在 jQuery 的 ajaxComplete 中忽略查询参数匹配 URL-js教程-PHP中文网

如何在 jQuery 的 ajaxComplete 中忽略查询参数匹配 URL

本文介绍如何在使用 jQuery 的 ajaxComplete 事件时，正确匹配包含动态查询字符串（如 ?_=1324346569）的 AJAX 请求 URL，避免因时间戳等随机参数导致匹配失败。核心方案是采用子字符串包含判断，而非全等匹配。

本文介绍如何在使用 jquery 的 `ajaxcomplete` 事件时，正确匹配包含动态查询字符串（如 `?_=1324346569`）的 ajax 请求 url，避免因时间戳等随机参数导致匹配失败。核心方案是采用子字符串包含判断，而非全等匹配。

在实际前端开发中（尤其是 Shopify 等平台），/cart.js 这类资源常被浏览器或框架自动添加缓存规避参数（如 ?_=1698765432），导致直接使用严格相等（===）判断 settings.url === "/cart.js" 始终为 false，无法触发预期逻辑。

正确的做法是检查 URL 是否以目标路径开头或包含该路径片段。推荐使用 String.prototype.includes() 方法，简洁且兼容性良好（支持 IE9+，现代项目中基本无兼容顾虑）：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

$(document).ajaxComplete(function(event, xhr, settings) {
    if (settings.url.includes("/cart.js")) {
        console.log("✅ 成功捕获 /cart.js 请求（忽略查询参数）");
        // 在此处执行 cart 数据更新、UI 同步等操作
    }
});

⚠️ 注意事项：

includes() 是子串匹配，若存在 /my-cart.js 或 /checkout/cart.js 等相似路径，也可能被误匹配。如需更精确控制，建议使用正则表达式或 URL 构造函数解析路径：
```
const url = new URL(settings.url, window.location.origin);
if (url.pathname === "/cart.js") {
    console.log("✅ 精确匹配 pathname，完全忽略 query/search 和 hash");
}
```
若需兼容老旧浏览器（如 IE8），可改用 indexOf !== -1 替代 includes()；
ajaxComplete 是全局事件，频繁触发可能影响性能，建议在必要时添加条件过滤，或考虑改用 fetch 拦截 + AbortController 等现代方案替代。

综上，settings.url.includes("/cart.js") 是兼顾简洁性、可读性与可靠性的首选方案，能稳健应对各类动态查询参数场景。