jQuery提供了一些平常開發中須要的快捷操做,例如load、ajax、get和post等,使用jQuery開發ajax將變得極其簡單。這樣開發人員就能夠將程序開發集中在業務和用戶體驗上,而不須要理會那麼繁瑣的XMLHTTPRequest對象。jQuery對ajax操做進行了封裝,在jQuery中$.ajax()屬性最底層的方法,第2層是load()、$.get()和$.post()方法,第3層是$.getScript()和$.getJSON()方法。下面將詳細介紹jQuery中的ajaxjavascript
load()方法是jQuery中最簡單和經常使用的ajax方法,使用load()方法經過ajax請求加載服務器中的數據,並把返回的數據放置到指定的元素中php
【調用格式】css
load()方法的調用格式爲以下所示,參數url爲加載服務器地址,可選項data參數爲請求時發送的數據,callback參數爲數據請求成功後,執行的回調函數html
load(url,[data],[callback])
【載入HTML文檔】前端
$('#result').load('ajax/test.html');
[注意]若是選擇器沒有匹配的元素,如document不包含id="result"的元素,這個Ajax請求將不會被髮送出去java
<!-- 當前頁面--> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <style> h6{margin:4px;} p{margin: 0;} </style> <body> <input type="button" id="send" value="ajax獲取"> <div class="comment">已有評論:</div> <div id="resText"></div> <script> $(function(){ $('#send').click(function(){ $('#resText').load('ajaxjQueryLoad.html') }) }) </script> <!-- 要載入的頁面 --> <div class="comment"> <h6>張三:</h6> <p class="para">沙發.</p> </div> <div class="comment"> <h6>李四:</h6> <p class="para">板凳.</p> </div> <div class="comment"> <h6>王五:</h6> <p class="para">地板.</p> </div>
【部分載入】jquery
若是url參數的字符串中包含一個或多個空格,那麼第一個空格後面的內容,會被當成是jQuery的選擇器,從而決定應該加載返回結果中的哪部份內容ajax
$('#result').load('ajax/test.html #container');
當這種方法執行, 它將檢索ajax/test.html返回的頁面內容,jQuery會獲取ID爲container元素的內容,而且插入到ID爲result元素,而其餘未被檢索到的元素將被廢棄json
$(function(){ $('#send').click(function(){ $('#resText').load('ajaxjQueryLoad.html .para') }) })
【傳遞方式】後端
load()方法默認使用GET方式,若是data參數提供一個對象,那麼使用POST方式
//無參數傳遞,則是GET方式 $('#resText').load('tset.php') //有參數傳遞,則是POST方式 $('#resText').load('tset.php',{name:'rain',age:'22'})
【回調函數】
若是提供了"complete"回調函數,它將在函數處理完以後,而且HTML已經被插入完時被調用。回調函數會在每一個匹配的元素上被調用一次,而且this始終指向當前正在處理的DOM元素
回調函數有3個參數,分別表明請求返回的內容、請求狀態和XMLHTTPRequest對象
$('#result').load('ajax/test.html',function(responseText,textStatus,XMLHTTPRequest) { //responseText :請求返回的內容 //testStatus: success、error、notmodified、timeout四種 //XMLHTTPRequest: XMLHTTPRequest對象 });
<style> h6{margin:4px;} p{margin: 0;} #test{border:1px solid black;} </style> <input type="button" id="send" value="ajax獲取"> <div class="comment">已有評論:</div> <div id="resText"></div> <div id="test"></div> <script> $(function(){ $('#send').click(function(){ $('#resText').load('ajaxjQueryLoad.html .para',function(a,b,c){ $('#test').html('responseText:' + a + '<br>textStatus:' + b + '<br>XMLHTTPRequest:' + c); }) }) }) </script>
getJSON()方法使用一個HTTP GET請求從服務器加載JSON編碼的數據
【調用格式】
getJSON()方法的調用格式以下。其中,url參數爲請求加載json格式文件的服務器地址,可選項data參數爲請求時發送的數據,callback參數爲數據請求成功後,執行的回調函數
$.getJSON(url,[data],[callback])
getJSON()方法至關於如下ajax()方法的縮寫
$.ajax({ dataType: "json", url: url, data: data, success: success });
【回調函數】
回調函數中的第一個參數表示返回的數據
$.getJSON('test.json',function(data){ //data :返回的數據 })
通常地,使用each()方法,來構建DOM結構
<input id="btnShow" type="button" value="加載" /> <div id="result"></div> <script> $('#btnShow').click(function(){ var $this = $(this); var $html = ''; $.getJSON('sport.json',function(data){ $this.attr('disabled','true'); $.each(data,function(index,sport){ $html += '<div>' + sport["name"] + '</div>'; }); $('#result').html($html); }) }) </script>
json文件以下
[{
"name": "足球"
},{
"name": "散步"
},{
"name": "籃球"
},{
"name": "乒乓球"
},{
"name": "騎自行車"
}]
getScript()方法使用一個HTTP GET請求從服務器加載並執行一個javascript文件
getScript()方法調用格式以下,參數url爲服務器請求地址,可選項callback參數爲請求成功後執行的回調函數
$.getScript(url,[callback])
至關於一個Ajax函數的縮寫
$.ajax({
url: url,
dataType: "script",
success: success
});
<input id="btnShow" type="button" value="加載" /> <div id="result"></div> <script> $('#btnShow').click(function(){ var $this = $(this); $.getScript('sport.js',function(){ $this.attr('disabled','true'); $('#result').html($html); }) }) </script>
js文件以下
var data = [{ "name": "足球" }, { "name": "散步" }, { "name": "籃球" }, { "name": "乒乓球" }, { "name": "騎自行車" }]; var $html = ''; $.each(data, function (index, sport) { $html += "<div>" + sport["name"] + "</div>"; });
get()方法使用一個HTTP GET請求從服務器加載數據
【調用格式】
get()方法的調用格式以下所示,url表示一個包含發送請求的URL字符串;data表示發送給服務器的字符串或Key/value鍵值對;success(data, textStatus, jqXHR)表示當請求成功後執行的回調函數;dataType表示從服務器返回的預期的數據類型。默認:智能猜想(xml, json, script, 或 html)
jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
至關於一個ajax功能的縮寫
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
【使用參數】
經過get()方法發送給服務器的key/value數據會做爲查詢字符串最終附加到URL中
<form action="#" id="form1"> <p>評論:</p> <p>姓名:<input type="text" name="username" id="username"></p> <p>內容:<textarea name="content" id="content" rows="2" cols="20"></textarea></p> <p><input type="button" id="send" value="提交"></p> </form> <div class="comment">已有評論: <div id="resText"></div> </div> <script> $('#send').click(function(){ $.get('jqGet.php',{ username:$('#username').val(), content:$('#content').val() },function(data){ // }) }) </script>
【回調函數】
function(data,textStatus){ //data: 返回的內容,多是XML、JSON、HTML、JS //textStatus: success、error、notmodified、timeout四種 }
【數據格式】
一、HTML片斷
function(data,textStatus){ $('#resText').html(data); }
二、XML文檔
function(data,textStatus){ var username = $(data).find('comment').attr('username'); var content = $(data).find('comment content').text(); var txtHtml = "<div class='comment'><h6>" + username + ":</h6><p class='para'>" + content + "</p></div>"; $('#resText').html(txtHtml); }
三、JSON
function(data,textStatus){ var username = data.username; var content = data.content; var txtHtml = "<div class='comment'><h6>" + username + ":</h6><p class='para'>" + content + "</p></div>"; $('#resText').html(txtHtml); }
<!-- 前端頁面 --> <select id="num"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <button id="send">測試</button> <div id="result"></div> <script> $('#send').click(function(){ $.get('jqRequest.php',{ num: $('#num').val() },function(data){ $('#result').html('您選擇的數字' + $('#num').val() + '是' + data) }) }) </script> <!-- 後端頁面 --> <?php $num = $_REQUEST['num']; if($num % 2 == 0){ echo '偶數'; }else{ echo '奇數'; } ?>
post()方法使用一個HTTP POST 請求從服務器加載數據
jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
至關於一個 Ajax 函數的簡寫形式
$.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType });
<!-- 前端頁面 --> <select id="num"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <button id="send">測試</button> <div id="result"></div> <script> $('#send').click(function(){ $.post('jqRequest.php',{ num: $('#num').val() },function(data){ $('#result').html('您選擇的數字' + $('#num').val() + '是' + data) }) }) </script> <!-- 後端頁面 --> <?php $num = $_REQUEST['num']; if($num % 2 == 0){ echo '偶數'; }else{ echo '奇數'; } ?>
post()方法和get()方法的結構和使用方式都相同。但要注意的是,當load()方法帶有數據參數傳遞時,會使用POST方式發送請求
當一個表單中字段較多,表單元素較複雜時,就須要一種方法來簡化提取表單內部控件的值的操做,這一行爲一般叫序列化,jQuery提供了param()、serialize()和serialzeArray()這三個方法
【param()】
param(obj)方法用來建立一個數組或對象序列化的字符串,適用於一個URL地址查詢字符串或Ajax請求
console.log($.param({ width:1680, height:1050 }));//'width=1680&height=1050'
【serialize()】
serialize()方法將用做提交的表單元素的值編譯成字符串
[注意]serialize()方法的一個額外好處是會自動對鍵值對兒中的特殊字符進行編碼
<form> <select name="single"> <option>Single</option> <option>Single2</option> </select> <br /> <select name="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select> <br/> <input type="checkbox" name="check" value="check1" id="ch1"/> <label for="ch1">check1</label> <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/> <label for="ch2">check2</label> <br /> <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/> <label for="r1">radio1</label> <input type="radio" name="radio" value="radio2" id="r2"/> <label for="r2">radio2</label> </form> <p><tt id="results"></tt></p> <script> function showValues() { $("#results").text($("form").serialize()); } $(":checkbox, :radio").click(showValues); $("select").change(showValues); showValues(); </script>
【serializeArray()】
serializeArray()方法將用做提交的表單元素的值編譯成擁有name和value對象組成的數組,即json格式的數據。例如[ { name: a value: 1 }, { name: b value: 2 },...]
<form> <div><input type="text" name="a" value="1" id="a" /></div> <div><input type="text" name="b" value="2" id="b" /></div> <div><input type="hidden" name="c" value="3" id="c" /></div> <div> <textarea name="d" rows="8" cols="40">4</textarea> </div> <div><select name="e"> <option value="5" selected="selected">5</option> <option value="6">6</option> <option value="7">7</option> </select></div> <div> <input type="checkbox" name="f" value="8" id="f" /> </div> <div> <input type="submit" name="g" value="Submit" id="g" /> </div> </form> <script> $('form').submit(function() { console.log($(this).serializeArray()); return false; }); </script>
結果以下
[ { name: "a", value: "1" }, { name: "b", value: "2" }, { name: "c", value: "3" }, { name: "d", value: "4" }, { name: "e", value: "5" } ]
該對象可使用each()函數對數據進行迭代輸出
$dataArr = $('form').serializeArray(); $html = ''; $.each($dataArr,function(i,data){ $html += data.name + ':' + data.value + ';'; }) console.log($html);//a:1;b:2;c:3;d:4;e:5;
前面介紹的load()、get()、post()、getScript()、getJSON()等方法都是基於ajax()方法實現的
ajax()方法是最底層、功能最強大的請求服務器數據的方法,它不只能夠獲取服務器返回的數據,還能向服務器發送請求並傳遞數值,它的調用格式以下:
$.ajax([settings])
其中參數settings爲發送ajax請求時的配置對象,在該對象中,url表示服務器請求的路徑,data爲請求時傳遞的數據,dataType爲服務器返回的數據類型,success爲請求成功的執行的回調函數,type爲發送數據請求的方式,默認爲get
經常使用參數以下所示
名稱 值/描述 async 布爾值,表示請求是否異步處理。默認是 true。 beforeSend(xhr) 發送請求前運行的函數。 cache 布爾值,表示瀏覽器是否緩存被請求頁面。默認是 true。 complete(xhr,status) 請求完成時運行的函數(在請求成功或失敗以後均調用,即在success和error函數以後) contentType 發送數據時使用的內容類型。默認是"application/x-www-form-urlencoded" context 爲全部 AJAX 相關的回調函數規定 "this" 值。 data 規定要發送到服務器的數據。 dataFilter(data,type) 用於處理 XMLHttpRequest 原始響應數據的函數。 dataType 預期的服務器響應的數據類型。 error(xhr,status,error) 若是請求失敗要運行的函數。 global 布爾值,規定是否爲請求觸發全局 AJAX 事件處理程序。默認是 true。 ifModified 布爾值,規定是否僅在最後一次請求以來響應發生改變時才請求成功。默認是 false。 jsonp 在一個 jsonp 中重寫回調函數的字符串。 jsonpCallback 在一個 jsonp 中規定回調函數的名稱。 password 規定在 HTTP 訪問認證請求中使用的密碼。 processData 布爾值,規定經過請求發送的數據是否轉換爲查詢字符串。默認是 true。 scriptCharset 規定請求的字符集。 success(result,status,xhr) 當請求成功時運行的函數。 timeout 設置本地的請求超時時間(以毫秒計)。 traditional 布爾值,規定是否使用參數序列化的傳統樣式。 type 規定請求的類型(GET 或 POST)。 url 規定發送請求的 URL。默認是當前頁面。 username 規定在 HTTP 訪問認證請求中使用的用戶名。 xhr 用於建立 XMLHttpRequest 對象的函數。
<!-- 前端頁面 --> <select id="num"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <button id="send">測試</button> <div id="result"></div> <script> $('#send').click(function(){ $.ajax({ url:'jqRequest.php', type:'POST', data:{ num:$('#num').val() }, success:function(data){ $('#result').html('您選擇的數字' + $('#num').val() + '是' + data); } }) }) </script> <!-- 後端頁面 --> <?php $num = $_REQUEST['num']; if($num % 2 == 0){ echo '偶數'; }else{ echo '奇數'; } ?>
jQuery簡化ajax操做不只體如今調用ajax方法和處理響應方面,並且還體如今對調用ajax方法的過程當中的HTTP請求的控制。經過jQuery提供的一些自定義全局函數,可以爲各類與ajax相關的事件註冊回調函數。例如,當ajax請求開始時,會觸發ajaxStart()方法的回調函數;當ajax請求結束時,會觸發ajaxStop()的回調函數。這些方法都是全局的方法,所以不管建立它們的代碼位於何處,只要有ajax請求發生,就會觸發它們
【ajaxSetup()】
ajaxSetup()方法爲之後要用到的Ajax請求設置默認的值,設置完成後,後面的Ajax請求將不須要再添加這些選項值,它的調用格式爲:
$.ajaxSetup([options])
例如,設置 AJAX 請求默認地址爲 "/xmlhttp/",用 POST 代替默認 GET 方法。其後的 AJAX 請求再也不設置任何選項參數
$.ajaxSetup({ url: "/xmlhttp/", type: "POST" }); $.ajax({ data: myData });
若是想讓某個ajax請求不受ajaxSetup()方法的影響,能夠在使用ajax()方法時,將參數中的global設置爲false
$.ajaxSetup({ url: "/xmlhttp/", type: "POST" }); $.ajax({ global:false, url:"test", type:'GET' })
【ajaxStart()和ajaxStop()】
ajaxStart()和ajaxStop()方法是綁定Ajax事件。ajaxStart()方法用於在Ajax請求發出前觸發函數,ajaxStop()方法用於在Ajax請求完成後觸發函數。它們的調用格式爲
$(selector).ajaxStart(function()) $(selector).ajaxStop(function())
[注意]從 jQuery 1.8 開始, ajaxStart()和ajaxStop()方法只能綁定到 document元素
例如,讀取遠程網站的圖片速度可能會比較慢,若是在加載的過程當中,不給用戶提供一些提示和反饋信息,很容易讓用戶誤認爲按鈕單擊無用,使用戶對網站失去信心。這時,ajaxStart()和ajaxStop()方法就派上用場了
<!-- 前端頁面 --> <select id="num"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <button id="send">測試</button> <div id="result"></div> <script> $(document).ajaxStart(function(){ $('#test').show() }).ajaxStop(function(){ $('#test').hide(); }); $('#send').click(function(){ $.ajax({ url:'jqRequest.php', type:'POST', data:{ num:$('#num').val() }, success:function(data){ $('#result').html('您選擇的數字' + $('#num').val() + '是' + data); } }) }) </script> <!-- 後端頁面 --> <?php $num = $_REQUEST['num']; if($num % 2 == 0){ echo '偶數'; }else{ echo '奇數'; } ?>