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 相关文章推荐
刷新时清空文本框内容的js代码
Apr 23 Javascript
XENON基于JSON变种
Jul 27 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
JS实现在线ps功能详解
Jul 31 Javascript
Vue实现圆环进度条的示例
Feb 06 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基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
php无限遍历目录示例
2014/02/21 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
php中的ini配置原理详解
2014/10/14 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
关于Django外键赋值问题详解
2017/08/13 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
详解Python3 pickle模块用法
2019/09/16 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
sort命令的作用和用法
2013/08/25 面试题
保安2014年终工作总结
2014/12/06 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript