jQuery ajax 路由和过滤器使用说明

207 阅读 0 评论 137 点赞

我是靠谱客的博主精明诺言，最近开发中收集的这篇文章主要介绍jQuery ajax 路由和过滤器使用说明，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

遗憾的是，我用到的一个遗留系统并没有做到这样。于是在客户端应用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 }) 
}); 