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 相关文章推荐
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 Javascript
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读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
Dom 是什么的详细说明
2010/10/25 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
Python编程修改MP3文件名称的方法
2017/04/19 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
python三引号如何输入
2020/07/06 Python
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
宿舍打麻将检讨书
2014/01/24 职场文书
班组安全员工作职责
2014/02/01 职场文书
小学清明节活动方案
2014/03/08 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
2015年团支书工作总结
2015/04/03 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书