jQuery Ajax樣本學習筆記

使用 jQuery 將使 Ajax 變得及其簡單。jQuery 提供有一些函數，可以使簡單的工作變得更加簡單，複雜的工作變得不再複雜。

Ajax 最常見的用法就是把一塊 HTML 程式碼載入到頁面的某個地區中去。為此，只需簡單地選擇所需的元素，然後使用 load() 函數即可。下面是一個用於更新統計資料的樣本：

代碼如下	複製代碼
$(‘#stats’).load(’stats.html’);

通常，我們只需簡單地把一些參數傳遞給伺服器中的某個頁面。正如您所預料的，使用 jQuery 實現這一操作非常地簡單。您可以使用 $.post() 或者 $.get()，這由所需的方法決定。如果需要的話，您還可以傳遞一個可選的資料對象和回呼函數。清單 4 顯示了一個發送資料和使用回調的簡單樣本。

清單 4. 使用 Ajax 向頁面發送資料

代碼如下	複製代碼
$.post(’save.cgi’, { text: ‘my string’, number: 23 }, function() { alert(‘Your data has been saved.’); });

如果您確實需要編寫一些複雜的 Ajax 指令碼，那麼需要用到 $.ajax() 函數。您可以指定 xml、script、html 或者 json，jQuery 將自動為回呼函數準備合適的結果，這樣您便可以立即使用該結果。還可以指定 beforeSend、error、success 或者 complete 回呼函數，向使用者提供更多有關 Ajax 體驗的反饋。此外，還有一些其它的參數可供使用，您可以使用它們設定 Ajax 請求的逾時，也可以設定頁面 “最近一次修改” 的狀態。清單 5 顯示了一個使用一些我所提到的參數檢索 XML 文檔的樣本。

清單 5. $.ajax() 使 Ajax 由複雜變簡單

代碼如下	複製代碼
$.ajax({ url: ‘document.xml’, type: ‘GET’, dataType: ‘xml’, timeout: 1000, error: function(){ alert(‘Error loading XML document’); }, success: function(xml){ // do something with xml } });

當 success 回呼函數返回 XML 文檔後，您可以使用 jQuery 檢索這個 XML 文檔，其方式與檢索 HTML 文檔是一樣的。這樣使得處理 XML 文檔變得相當地容易，並且把內容和Data Integration到了您的 Web 網站裡面。清單 6 顯示了 success 函數的一個擴充，它為 XML 中的每個 元素都添加了一個清單項目到 Web 頁面中。
清單 6. 使用 jQuery 處理 XML 文檔

代碼如下	複製代碼
success: function(xml){ $(xml).find(‘item’).each(function(){ var item_text = $(this).text(); $(‘   ‘) .html(item_text) .appendTo(‘ol’); }); }

看一個jQuery Ajax 執行個體示範

代碼如下

複製代碼

<html> <head> <title>jQuery Ajax 執行個體示範</title> </head> <script language="javascript" src="../lib/jquery.js"></script> <script language="javascript"> $(document).ready(function () {    $('#send_ajax').click(function (){      var params=$('input').serialize(); //序列化表單的值      $.ajax({        url:'ajax_json.php', //幕後處理程式        type:'post',         //資料發送方式        dataType:'json',     //接受資料格式        data:params,         //要傳遞的資料        success:update_page //回傳函數(這裡是函數名)      });    }); //$.post()方式： $('#test_post').click(function (){     $.post(       'ajax_json.php',       {         username:$('#input1').val(),         age:$('#input2').val(),         sex:$('#input3').val(),         job:$('#input4').val()       },       function (data) //回傳函數       {         var myjson='';         eval('myjson=' + data + ';');         $('#result').html("姓名:" + myjson.username + "<br/>工作:" + myjson['job']);       }     );    }); //$.get()方式： $('#test_get').click(function () {     $.get(       'ajax_json.php',       {         username:$("#input1").val(),         age:$("#input2").val(),         sex:$("#input3").val(),         job:$("#input4").val()       },       function(data) //回傳函數       {         var myjson='';         eval("myjson=" + data + ";");         $("#result").html(myjson.job);       }     ); }); }); function update_page (json) //回傳函數實體，參數為XMLhttpRequest.responseText { var str="姓名:"+json.username+"<br />"; str+="年齡:"+json.age+"<br />"; str+="性別:"+json.sex+"<br />"; str+="工作:"+json.job+"<br />"; str+="追加測試:"+json.append; $("#result").html(str); } </script> <body> <div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div> <form id="formtest" action="" method="post">     <p><span>輸入姓名:</span><input type="text" name="username" id="input1" /></p>     <p><span>輸入年齡:</span><input type="text" name="age" id="input2" /></p>     <p><span>輸入性別:</span><input type="text" name="sex" id="input3" /></p>     <p><span>輸入工作:</span><input type="text" name="job" id="input4" /></p> </form> <button id="send_ajax">提交</button> <button id="test_post">POST提交</button> <button id="test_get">GET提交</button> </body> </html>

PHP 檔案 ajax_json.php：

代碼如下

複製代碼

<?php //$arr = $_POST; //若以$.get()方式發送資料，則要改成$_GET.或者乾脆:$_REQUEST $arr = $_REQUEST; $arr['append'] = '測試字串'; //print_r($arr); $myjson = my_json_encode($arr); echo $myjson; function my_json_encode($phparr) {     if(function_exists("json_encode"))     {       return json_encode($phparr);     }     else     {       require_once 'json/json.class.php';       $json = new Services_JSON;       return $json->encode($phparr);     } } ?>