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()的區(qū)別示例介紹
Jquery中的層次選擇器與find()是有一定的區(qū)別，本文有個示例可以很好的說明，感興趣的朋友可以參考下2014-02-02
下面小編就為大家?guī)硪黄猨query 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方法的使用方法，用此方法實現了當爺們加載完成后才執(zhí)行的效果，有相同需求的小伙伴可以參考下。2014-11-11