jQuery ajax 路由和过滤器使用说明 - Web前端
作者:98wpeu发布时间:2026-10-05分类:网页前端技术浏览:6
导读:遗憾的是,我用到的一个遗留系统并没有做到这样。于是在客户端应用JQuery的AjaxPRefilter改造了一下调用方法。复制代码代码如下:<html><h...
遗憾的是,我用到的一个遗留系统并没有做到这样。于是在客户端应用JQuery的AjaxPRefilter改造了一下调用方法。
复制代码 代码如下:
<html>
<head>
<title>ajaxPrefilter demo</title>
</head>
<body>
<scripttype="text/javascript" src="http://code.jQuery.com/jquery-latest.min.JS"></script>
<script type="text/JavaScript">
var zoneAjaxurl = '/ajax.PHP';
var zoneAjaxRoute = /\/ajax\/(\w+)\/(\w+)\/(\w+)(\?.*)?/;
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
// console.log(options.url,'\n',originalOptions.url);
var m = options.url.match(zoneAjaxRoute)
if(m){
var routed = {
dir : m[1], page : m[2], action : m[3],
args : JSON.stringify(originalOptions.data)
}
options.url = zoneAjaxUrl+ (m[4]||'');
options.data = $.param(routed);
}
});
var url = '/ajax/dir/page/action';
// var url = '/ajax/dir/page/action?a=1&b=2';
var url_JSONP = '/ajax/dir/page/action?callback=?';
// var url_jsonp = '/ajax/dir/page/action?a1=2&b1=3&diy_callback=?';
var data = {
Username: "abc@example.com",
users : ['a','b']
}
$.post(url,data);
$.get(url,data);
$.getJSON(url_jsonp,data);
</script>
</body>
</HTML>
使用比对
复制代码 代码如下:
// 改造之后
$.post('/ajax/dir/page/action',{page:1})
// 改造之前
$.post('/ajax.php',{
dir : 'dir',
page : 'page',
action : 'action',
args : JSON.stringify({ page:1 })
});
复制代码 代码如下:
<html>
<head>
<title>ajaxPrefilter demo</title>
</head>
<body>
<scripttype="text/javascript" src="http://code.jQuery.com/jquery-latest.min.JS"></script>
<script type="text/JavaScript">
var zoneAjaxurl = '/ajax.PHP';
var zoneAjaxRoute = /\/ajax\/(\w+)\/(\w+)\/(\w+)(\?.*)?/;
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
// console.log(options.url,'\n',originalOptions.url);
var m = options.url.match(zoneAjaxRoute)
if(m){
var routed = {
dir : m[1], page : m[2], action : m[3],
args : JSON.stringify(originalOptions.data)
}
options.url = zoneAjaxUrl+ (m[4]||'');
options.data = $.param(routed);
}
});
var url = '/ajax/dir/page/action';
// var url = '/ajax/dir/page/action?a=1&b=2';
var url_JSONP = '/ajax/dir/page/action?callback=?';
// var url_jsonp = '/ajax/dir/page/action?a1=2&b1=3&diy_callback=?';
var data = {
Username: "abc@example.com",
users : ['a','b']
}
$.post(url,data);
$.get(url,data);
$.getJSON(url_jsonp,data);
</script>
</body>
</HTML>
使用比对
复制代码 代码如下:
// 改造之后
$.post('/ajax/dir/page/action',{page:1})
// 改造之前
$.post('/ajax.php',{
dir : 'dir',
page : 'page',
action : 'action',
args : JSON.stringify({ page:1 })
});
- 上一篇:关于html+ashx开发中几个问题的解决方法 - Web前端
- 下一篇:已经是最后一篇了
相关推荐
- 关于html+ashx开发中几个问题的解决方法 - Web前端
- jQuery选择器的工作原理和优化分析 - Web前端
- 基于jQuery实现的当离开页面时出现提示的实现代码 - Web前端
- jQuery .tmpl(), .template()学习资料小结 - Web前端
- JqGrid web打印实现代码 - Web前端
- JQuery优缺点分析说明 - Web前端
- JQuery将文本转化成JSON对象需要注意的问题 - Web前端
- jQuery 源码分析笔记(2) 变量列表 - Web前端
- 小试JQuery的AutoComplete插件 - Web前端
- jQuery、zepto、js应用之小技巧 - Web前端
- 网页前端技术排行
-
- 1[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 2分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 3jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 4【第六章】Foundation之按钮和下拉功能 - Web前端
- 5基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 6jQuery编写widget的一些技巧分享 - Web前端
- 7分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 8在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 9jQuery实现鼠标移到元素上动态提示消息框效果 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件:Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案:坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP:Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性


