Jquery ajax各種用法說明詳解

Jquery非同步載入一個頁面是如此簡單：

jQuery AJAX 請求

請求 描述

$(selector).load(url,data,callback) 把遠端資料載入到被選的元素中
$.ajax(options) 把遠端資料載入到 XMLHttpRequest 對象中
$.get(url,data,callback,type) 使用 HTTP GET 來載入遠端資料
$.post(url,data,callback,type) 使用 HTTP POST 來載入遠端資料
$.getJSON(url,data,callback) 使用 HTTP GET 來載入遠程 JSON 資料
$.getScript(url,callback) 載入並執行遠端 JavaScript 檔案

(url) 被載入的資料的 URL（地址）

(data) 發送到伺服器的資料的鍵/值對象

(callback) 當資料被載入時，所執行的函數

(type) 被返回的資料的類型 (html,xml,json,jasonp,script,text)

(options) 完整 AJAX 請求的所有鍵/值對選項

代碼如下	複製代碼
$.ajax({ url: "/testl/index.html", cache: false, success: function(html){ $("#test").append(html); } });

或者更簡單的：

代碼如下	複製代碼
$("#test").load("/test/index.html");

以 POST 形式發送附加參數並在成功時顯示資訊。

jQuery 代碼：

代碼如下	複製代碼
$("#feeds").load("feeds.php", {limit: 25}, function(){ alert("The last 25 entries in the feed have been loaded"); });

載入並執行一個 JavaScript 檔案:載入並執行 test.js ，成功後顯示資訊。

jQuery 代碼:

代碼如下	複製代碼
$.getScript("test.js", function(){ alert("Script loaded and executed.");});

jquery json代碼

JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。易於人閱讀和編寫，同時也易於機器解析和產生。JSON在前後台互動的過程中發揮著相當出色的作用。本人很討厭XML的那種複雜的資料結構，呵呵~~其實自己也沒對XML進行過很深的研究，只是覺得用js操作XML一點都沒操作json來得方便。

DEMO看完了吧？那麼接下來看教程吧！

代碼如下

複製代碼

XHML <DIV style="Z-INDEX: 10; POSITION: absolute; DISPLAY: none" id=ajax_image>     <IMG border=0 src="images/ajax-loading.gif"> </DIV> <DIV id=box> <H3>Jquery/Ajax/JSON/PHP操作完全執行個體</H3> <SELECT id=letter> <OPTION selected value="">請選擇首字母</OPTION> <OPTION value=A>A</OPTION> <OPTION value=B>B</OPTION> <OPTION value=C>C</OPTION> <OPTION value=D>D</OPTION> <OPTION value=E>E</OPTION> <OPTION value=F>F</OPTION> <OPTION value=G>G</OPTION> <OPTION value=H>H</OPTION> <OPTION value=I>I</OPTION> <OPTION value=J>J</OPTION> <OPTION value=K>K</OPTION> <OPTION value=L>L</OPTION> <OPTION value=M>M</OPTION> <OPTION value=N>N</OPTION> <OPTION value=X>X</OPTION></SELECT> <SELECT id=server> <OPTION selected value="">等待你選擇首字母</OPTION></SELECT> </DIV>

執行個體中，我加兩個下拉式功能表分別給了兩個不同的ID，第一個#letter(代表首字母的下拉式功能表),第二個#server(代表魔獸伺服器的下拉式功能表),我想要的效果是當選擇第一個下拉式功能表的時候，第二個下拉式功能表首先會變成“請稍等…正在載入資料”，還有同時會出現一個ajax-loading的圖片，然後第二個下拉式功能表會出來魔獸的伺服器資訊，是根據首字母來取得的。

JS代碼

代碼如下

複製代碼

$(function(){     $('#letter').change(function(){         var $letter_select = $(this);//選擇首字母下拉式功能表的jquery對象         var $server_select = $('#server');//伺服器的下拉式功能表的jquery對象         if ($letter_select.val() == ""){//如果下單菜單選擇了初始的“請選擇首字母”的選項             $server_select.empty().append(" <OPTION value="">等待你選擇首字母</OPTION>   ");             return false;         }         $server_select.empty().append(" <OPTION value="">請稍等...正在載入資料</OPTION>   ");//將server的下拉式功能表清空並且加入一個“請稍等...正在載入資料”的項目         var $tips = $('#ajax_image');//這個是ajax圖片的jquery對象         var $position = $letter_select.offset();//取得當前操作的位置         $tips.css("top",$position.top).css("left",$position.left).show();//將ajax-loading的圖片移動到當前操作的位置，並且讓這個圖片顯示出來         $.getJSON('jquery_ajax_json_php/search_server.html?letter=' + $letter_select.val(),function(json){             if(json.length == 0){//沒有從資料庫中找到資料                 $server_select.empty().append(" <OPTION value="">不好意思，沒有找到資料</OPTION>   ")             }else{//成功擷取資料                 $server_select.empty();//將server的下拉式功能表清空                 $.each(json,function(index,entry){//利用each方法，遍曆json數組 index代表序號0,1,2... entry代表結果對象                     $server_select.append(" <OPTION value='"+ entry.id +"'>"+entry.name+"</OPTION>   ");//將取得的資料逐條插入到server的下拉式功能表中                 });             }             $tips.hide();//隱藏ajax-loading圖片         })     }) });

這裡我給首字母的下拉式功能表綁定了一個onchange的事件，ajax的方法是用的jquery的getJSON的方法。代碼裡面已經有了注視了，我就不多說了。

PHP代碼

代碼如下

複製代碼

function search_server(){     //取得參數     $letter = $this->input->get('letter');     //查詢資料     $server_list = $this->db->from('wow_server')->like('name',$letter,'after')->get();     $return_result = array();     if ($server_list->num_rows() > 0){         foreach($server_list->result() as $server_obj){//將取得的結果壓成二維數組             $return_result[] = array(                 'id'    => $server_obj->id,                 'name'  => $server_obj->name             );         }     }     sleep(1);//讓程式等待1秒，然後再返回資料     echo json_encode($return_result); }

最後附上用到的表資訊

代碼如下	複製代碼
CREATE TABLE `ci_wow_server` (   `id` int(11) NOT NULL AUTO_INCREMENT,   `name` varchar(64) NOT NULL DEFAULT '',   PRIMARY KEY (`id`),   KEY `idx_products_options_values_name_zen` (`name`) ) ENGINE=MyISAM AUTO_INCREMENT=1163 DEFAULT CHARSET=utf8

Ajax 操作函數

jQuery 庫擁有完整的 Ajax 相容套件。其中的函數和方法允許我們在不重新整理瀏覽器的情況下從伺服器載入資料。

函數 描述

jQuery.ajax() 執行非同步 HTTP (Ajax) 請求。
.ajaxComplete() 當 Ajax 請求完成時註冊要調用的處理常式。這是一個 Ajax 事件。
.ajaxError() 當 Ajax 請求完成且出現錯誤時註冊要調用的處理常式。這是一個 Ajax 事件。
.ajaxSend() 在 Ajax 請求發送之前顯示一條訊息。
jQuery.ajaxSetup() 設定將來的 Ajax 請求的預設值。
.ajaxStart() 當首個 Ajax 請求完成開始時註冊要調用的處理常式。這是一個 Ajax 事件。
.ajaxStop() 當所有 Ajax 請求完成時註冊要調用的處理常式。這是一個 Ajax 事件。
.ajaxSuccess() 當 Ajax 請求成功完成時顯示一條訊息。
jQuery.get() 使用 HTTP GET 請求從伺服器載入資料。
jQuery.getJSON() 使用 HTTP GET 請求從伺服器載入 JSON 編碼資料。
jQuery.getScript() 使用 HTTP GET 請求從伺服器載入 JavaScript 檔案，然後執行該檔案。
.load() 從伺服器載入資料，然後把返回到 HTML 放入匹配元素。
jQuery.param() 建立數組或對象的序列化表示，適合在 URL 查詢字串或 Ajax 請求中使用。
jQuery.post() 使用 HTTP POST 請求從伺服器載入資料。
.serialize() 將表單內容序列化為字串。
.serializeArray() 序列化表單元素，返回 JSON 資料結構資料。