jQuery ajax 路由和過濾器使用說明
更新時(shí)間：2011年08月02日 22:25:26 作者：
好的web api應(yīng)該在url里面有足夠的信息，并且每個(gè)資源方法有它對(duì)應(yīng)的url。
遺憾的是，我用到的一個(gè)遺留系統(tǒng)并沒有做到這樣。于是在客戶端應(yīng)用jQuery的ajaxPrefilter改造了一下調(diào)用方法。
<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>
使用比對(duì)
// 改造之后
$.post('/ajax/dir/page/action',{page:1})
// 改造之前
$.post('/ajax.php',{
dir : 'dir',
page : 'page',
action : 'action',
args : JSON.stringify({ page:1 })
});
復(fù)制代碼 代碼如下:
<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>
使用比對(duì)
復(fù)制代碼 代碼如下:
// 改造之后
$.post('/ajax/dir/page/action',{page:1})
// 改造之前
$.post('/ajax.php',{
dir : 'dir',
page : 'page',
action : 'action',
args : JSON.stringify({ page:1 })
});
您可能感興趣的文章:
- jQuery中可見性過濾器簡(jiǎn)單用法示例
- jQuery中過濾器的基本用法示例
- JQuery的常用選擇器、過濾器、方法全面介紹
- jQuery使用contains過濾器實(shí)現(xiàn)精確匹配方法詳解
- jQuery可見性過濾器：hidden和：visibility用法實(shí)例
- JQuery選擇器、過濾器大整理
- jQuery表單域?qū)傩赃^濾器用法分析
- Jquery 過濾器(first,last,not,even,odd)的使用
- 從jquery的過濾器.filter()方法想到的
- jQuery contains過濾器實(shí)現(xiàn)精確匹配使用方法
- jquery中通過過濾器獲取表單元素的實(shí)現(xiàn)代碼
- JQuery 選擇器、過濾器介紹
- jQuery中內(nèi)容過濾器簡(jiǎn)單用法示例
相關(guān)文章
jQuery獲取table下某一行某一列的值實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery獲取table下某一行某一列的值實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-04-04
用jQuery好久了，都做了兩個(gè)項(xiàng)目了。今兒晚上喝咖啡喝多了，這都兩點(diǎn)多了睡不著，給大家分享下我在項(xiàng)目中用到的一些用jQuery實(shí)現(xiàn)的一些比較好的功能。希望對(duì)一些新手有點(diǎn)用。。。高手們可以拍磚哈。。。。我頭很硬不怕疼。。。呵呵。2010-08-08
jquery實(shí)現(xiàn)刪除一個(gè)元素后面的所有元素功能
這篇文章主要介紹了jquery實(shí)現(xiàn)刪除一個(gè)元素后面的所有元素功能，操作簡(jiǎn)單方便，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了jQuery中:disabled選擇器用法,實(shí)例分析了:disabled選擇器功能、定義及選取所有禁用的表單元素的技巧,需要的朋友可以參考下2015-01-01
jQuery實(shí)現(xiàn)對(duì)無(wú)序列表的排序功能(附demo源碼下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)對(duì)無(wú)序列表的排序功能,涉及jQuery與javascript常見的文本操作函數(shù)與sort排序函數(shù)的相關(guān)使用方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
關(guān)于JavaScript和jQuery的類型判斷詳解
下面小編就為大家?guī)?lái)一篇淺談JavaScript和jQuery的類型判斷。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-10-10
關(guān)于jquery.validate1.9.0前臺(tái)驗(yàn)證的使用介紹
本篇文章介紹了，關(guān)于jquery.validate1.9.0前臺(tái)驗(yàn)證的使用。需要的朋友參考下2013-04-04
最近在做項(xiàng)目的時(shí)候用到了bootstrap，在使用中發(fā)現(xiàn)其data與jquery的data有些不一樣的地方，記錄一下，分享給大家2014-07-07
本文主要介紹了jquery實(shí)現(xiàn)文本框的禁用和啟用，代碼清晰，有需要的朋友可以參考下，希望會(huì)對(duì)大家有所幫助2016-12-12
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)輪播圖及其原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08