jQuery ajax 路由和过滤器使用说明
更新时间：2011年08月02日 22:25:26 作者：
好的web api应该在url里面有足够的信息，并且每个资源方法有它对应的url。
遗憾的是，我用到的一个遗留系统并没有做到这样。于是在客户端应用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 })
});
复制代码 代码如下:
<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 })
});
您可能感兴趣的文章:
- jQuery中可见性过滤器简单用法示例
- jQuery中过滤器的基本用法示例
- JQuery的常用选择器、过滤器、方法全面介绍
- jQuery使用contains过滤器实现精确匹配方法详解
- jQuery可见性过滤器：hidden和：visibility用法实例
- JQuery选择器、过滤器大整理
- jQuery表单域属性过滤器用法分析
- Jquery 过滤器(first,last,not,even,odd)的使用
- 从jquery的过滤器.filter()方法想到的
- jQuery contains过滤器实现精确匹配使用方法
- jquery中通过过滤器获取表单元素的实现代码
- JQuery 选择器、过滤器介绍
- jQuery中内容过滤器简单用法示例
相关文章
jQuery EasyUI API 中文文档 可调整尺寸，学习jQuery EasyUI的朋友可以参考下。2011-09-09
Jquery中的层次选择器与find()是有一定的区别，本文有个示例可以很好的说明，感兴趣的朋友可以参考下2014-02-02
下面小编就为大家带来一篇jquery tmpl模板(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了JQuery实现Ajax加载图片的方法,涉及jQuery基于缓存获取图片的技巧,需要的朋友可以参考下2015-12-12
使用CSS 制作导航菜单，实际主要是利用了css的li a属性，对于以后用css制作更绚丽的效果提高了很好的参考。2010-08-08
这篇文章主要介绍了tuzhu_req.js 实现仿百度图片首页效果的相关资料,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了jQuery带控制按钮轮播图插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
这篇文章主要介绍了jquery实现网页的页面平滑滚动效果代码,涉及jQuery结合鼠标事件操作页面元素滚动效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
当要在有限的空间展示更多的信息时，我们经常会采取鼠标滑过弹出更多相关信息层，提高互动性。尤其可以应用在公司照片墙、招聘网站求职者信息展示等等场景，本文给大家分享使用jquery实现鼠标滑过弹出更多相关信息层附源码下载，感兴趣的朋友参考下2015-11-11
本文主要介绍了jQuery的ready方法的使用方法，用此方法实现了当爷们加载完成后才执行的效果，有相同需求的小伙伴可以参考下。2014-11-11
最新评论