jQuery ajax 路由和过滤器使用说明


Posted in Javascript onAugust 02, 2011

遗憾的是,我用到的一个遗留系统并没有做到这样。于是在客户端应用jQuery的ajaxPrefilter改造了一下调用方法。

<html> 
<head> 
<title>ajaxPrefilter demo</title> 
</head> 
<body> 
<script type="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 }) 
});
Javascript 相关文章推荐
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
vue 实现锚点功能操作
Aug 10 Javascript
Vue实现图书管理案例
Jan 20 Vue.js
js禁止小键盘输入数字功能代码
Aug 01 #Javascript
js内置对象 学习笔记
Aug 01 #Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 #Javascript
js动态加载以及确定加载完成的代码
Jul 31 #Javascript
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 #Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 #Javascript
js中判断文本框是否为空的两种方法
Jul 31 #Javascript
You might like
使用PHP生成PDF方法详解
2015/01/23 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
python range()函数取反序遍历sequence的方法
2018/06/25 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
Python timeit模块原理及使用方法
2020/10/10 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
中学生学雷锋活动心得体会
2014/03/10 职场文书
化学教育专业求职信
2014/07/08 职场文书
驾驶员安全责任书
2014/07/22 职场文书
2014年优秀党员材料
2014/12/18 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书