jQuery/CSS3/HTML5 前端【3】jQuery Ajax

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

1.使用 $.ajax HTTP 要求載入遠端資料

　　預設情況下，Ajax 請求使用 GET 方法。如果要使用 POST 方法，可以設定 type: 'POST' 參數值。這個選項也會影響 data 選項中的內容如何發送到伺服器。

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

　　根據響應的不同的 MIME 類型，傳遞給 success 回呼函數的返回資料也有所不同，這些資料可以是 XML 根項目、文本字串、JavaScript 檔案或者 JSON 對象。也可向 success 回呼函數傳遞響應的文本狀態。對於 jQuery 1.4 也可以向 success 回呼函數傳遞 XMLHttpRequest 對象。對於 jQuery 1.5 也可以向 success 回呼函數傳遞 jqXHR 對象。

2.使用 $.ajaxSetup 設定全域 AJAX 預設選項

 1     //禁止觸發全域 AJAX 事件 2     //用 POST 代替預設 GET 方法 3     //預設 URL 和 success 函數 4     $("#button").click(function () { 5         $.ajaxSetup({ type: "POST", url: "/ControllerName/ActionName/", global: false, 6             success: function (data) { 7                 $("#div").html(data); 8             } 9         });10         $.ajax();11     });

3.使用 $.get 遠程 HTTP GET 請求載入資訊來改變 div 元素的文本

1     //局部重新整理2     function reload(id) {3         $.get("/ControllerName/ActionName/",                        //URL：  /ControllerName/ActionName/4                             {id: id, name: '@ViewData["name"]' },   //參數：   id: id, name: '@ViewData["name"]'5                              function (data) {                      //傳回值：  data6                                  $("#div").html(data);7                              });8     }

1     //欄位排序2     $("#a").click(function () {3         $.get("/ControllerName/ActionName/",4                         { id: '@ViewData["id"]', sortField: "User_UserName", order: '@ViewData["orderBy"].ToString()' },5                          function (data) {6                              $("#div").html(data);7                          });8     });

 1     //關鍵字查詢 2     $("#button").click(function () { 3         //擷取當前選中選項卡id，預設為0 4         var selected = $('#tab').tabs().tabs('option', 'selected'); 5         var keyword = $("#txtKeyword").val(); 6         $.get("/ControllerName/ActionName/", 7                               { keyword: keyword }, 8                                 function (data) { 9                                     $("#div").html(data);10                                     //初始化設定選中選項卡11                                     $('#tab').tabs().tabs('select', selected);12                                 });13     });

4.使用 $.post HTTP POST 請求從伺服器載入資料來改變 div 元素的文本

1     //通過 $.post 讀取的頁面不被緩衝2     $("#button").click(function () {3         $.post("/ControllerName/ActionName/", function (data) {4             $("#div").html(data);5         });6     });

5.使用 $.post 增刪改

 1     //資料操作 2     $("#button").click(function () { 3         var id = $(this).attr('id'); 4         //if (confirm("您確定刪除這條記錄嗎？")) { 5             //可以是增刪改任意一種 6             $.post("/ControllerName/ActionName/", 7                               { id: id }, 8                                     function (data) { 9                                         //傳回值判斷執行結果10                                         if (data == "true") {11                                             reload(id);12                                         } else {13                                             alert(data);14                                         }15                                     });16         //}17         //return false;18     });

 6.使用 $.getJSON HTTP GET 請求載入 JSON 資料

 1     //data可以是對象或以 JSON 結構定義的數組，並使用 $.parseJSON() 方法進行解析  2     $("#button").click(function () { 3         $.getJSON("/ControllerName/ActionName/", function (data) { 4             $.each(data, function (i, field) { 5                 $("#div").append(field + " "); 6             }); 7             //欄位資料 8             //$("#div").append(data.Field + " "); 9         });10     });

7.使用 $.getScript HTTP GET 請求載入並執行 JavaScript 檔案

1     //載入並執行2     $("#button").click(function () {3         $.getScript("demo.js");4     });