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中html()方法使用不当带来的陷阱
Apr 07 Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
javascript如何定义对象数组
Jun 07 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
详解从Vue-router到html5的pushState
Jul 21 Javascript
webpack 开发和生产并行设置的方法
Nov 08 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中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
python简单验证码识别的实现方法
2019/05/10 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
Python流程控制常用工具详解
2020/02/24 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
2014年乡镇植树节活动方案
2014/02/28 职场文书
标准版离职证明书
2014/09/12 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
2014年销售人员工作总结
2014/11/27 职场文书