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 相关文章推荐
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 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 危险函数全解析
2009/09/09 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
JS重载实现方法分析
2016/12/16 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
Python中模块string.py详解
2017/03/12 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
PyQt5每天必学之布局管理
2018/04/19 Python
Django 重写用户模型的实现
2019/07/29 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
python实现代码统计程序
2019/09/19 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
创先争优活动方案
2014/02/12 职场文书
大学生暑期实践感言
2014/02/26 职场文书
中药学专业求职信
2014/05/31 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
汽车销售合同文本
2019/08/08 职场文书
Python中使用ipython的详细教程
2021/06/22 Python