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 相关文章推荐
json 入门基础教程 推荐
Oct 31 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 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面向对象分析设计的经验原则
2008/09/20 PHP
一个比较简单的PHP 分页分组类
2009/12/10 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
javascript常见用法总结
2014/05/22 Javascript
javascript版2048小游戏
2015/03/18 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
Python数组条件过滤filter函数使用示例
2014/07/22 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
中介业务员岗位职责
2014/04/09 职场文书
教师师德考核自我评价
2014/09/13 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
检讨书范文1000字
2015/01/28 职场文书
市场总监岗位职责
2015/02/11 职场文书
2015年党小组工作总结
2015/05/26 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server