讲师中心 微信公众号
AI工具推荐 视频效率加速

如何在 jQuery ajaxComplete 中忽略查询字符串匹配 URL

酷雪大大_3834

酷雪大大_3834

发布时间:2026-04-11 13:17:04

|

927人浏览过

|

来源于php中文网

原创

本文介绍在使用 jQuery 的 ajaxComplete 事件时,如何正确匹配带动态查询参数(如 ?_=1324346569)的 URL,避免因查询字符串导致匹配失败,核心是采用子字符串包含判断而非全等匹配。

本文介绍在使用 jquery 的 ajaxcomplete 事件时,如何正确匹配带动态查询参数(如 `?_=1324346569`)的 url,避免因查询字符串导致匹配失败,核心是采用子字符串包含判断而非全等匹配。

在实际前端开发中,尤其是 Shopify 等平台的定制场景下,常需监听 /cart.js 等关键资源的 AJAX 加载完成事件。但浏览器或 jQuery 自动添加的时间戳类查询参数(如 ?_=1682345678901)会导致严格相等比较 settings.url === "/cart.js" 永远为 false,从而无法触发预期逻辑。

正确的做法是使用字符串包含检测(.includes()),它能可靠识别 URL 路径部分是否以目标路径开头,而忽略后续查询参数:

jQuery 1.12.4
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 请求(支持任意查询参数)");
        // 在此处执行更新购物车 UI、刷新数量 badge 等操作
    }
});

⚠️ 注意事项:

  • .includes() 是 ES6+ 方法,现代浏览器均支持;若需兼容 IE,可改用 settings.url.indexOf("/cart.js") !== -1;
  • 避免使用正则或 new URL() 解析(如 new URL(settings.url).pathname === "/cart.js"),因 settings.url 可能为相对路径或不合法 URL 字符串,引发异常;
  • 若存在多个相似路径(如 /cart.js 和 /cart-items.js),建议使用更精确的匹配方式,例如:
    const path = settings.url.split('?')[0]; // 提取路径部分(不含 query)
    if (path === "/cart.js") { /* 安全精准匹配 */ }

总结:ajaxComplete 中 URL 匹配应面向“路径语义”而非“完整字符串”。使用 includes() 或路径截断法,既简洁又健壮,是处理动态查询参数的标准实践。

热门AI工具

更多
蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

相关专题

更多
ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

3000

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

360

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2813

2023.11.15

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1161

2024.09.24

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4456

2023.06.20

正则表达式不包含
正则表达式不包含

正则表达式,又称规则表达式,,是一种文本模式,包括普通字符和特殊字符,是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串,通常被用来检索、替换那些符合某个模式的文本。php中文网给大家带来了有关正则表达式的相关教程以及文章,希望对大家能有所帮助。

2961

2023.07.05

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

8202

2023.07.05

java正则表达式匹配字符串
java正则表达式匹配字符串

在Java中,我们可以使用正则表达式来匹配字符串。本专题为大家带来java正则表达式匹配字符串的相关内容,帮助大家解决问题。

812

2023.08.11

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

0

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery官方API文档
jQuery官方API文档

共0课时 | 0人学习

jQuery 教程
jQuery 教程

共42课时 | 16.5万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 19.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn