導入好jQuery之后我們就可以開始進行ajax異步更新請求數(shù)據(jù)了。

1、使用load()方法通過Ajax請求加載服務(wù)器中的數(shù)據(jù)，并把返回的數(shù)據(jù)放置到指定的元素中，它的調(diào)用格式為：load(url,[data],[callback])參數(shù)url為加載服務(wù)器地址，可選項data參數(shù)為請求時發(fā)送的數(shù)據(jù)，callback參數(shù)為數(shù)據(jù)請求成功后，執(zhí)行的回調(diào)函數(shù)。

$(function(){
  $("#btn").click(function(){
    $("ul").html("<img src='Images/Loading.gif' alt=''/>").load("www.manyiaby.com",function(){
    });
  });
});

2、使用getJSON()方法可以通過Ajax異步請求的方式，獲取服務(wù)器中的數(shù)據(jù)，并對獲取的數(shù)據(jù)進行解析，顯示在頁面中，它的調(diào)用格式為：jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])其中，url參數(shù)為請求加載json格式文件的服務(wù)器地址，可選項data參數(shù)為請求時發(fā)送的數(shù)據(jù)，callback參數(shù)為數(shù)據(jù)請求成功后，執(zhí)行的回調(diào)函數(shù)。

$(function(){
  $("#btn").click(function(){
    $.getJson("www.manyiaby.com", function(data){
      $.each(data, function(index, sport){
        if(index==3)
          alert(sport["name"]);
      })
    });
  });
});

3、使用getScript()方法異步請求并執(zhí)行服務(wù)器中的JavaScript格式的文件，它的調(diào)用格式如下所示：jQuery.getScript(url,[callback])或$.getScript(url,[callback])參數(shù)url為服務(wù)器請求地址，可選項callback參數(shù)為請求成功后執(zhí)行的回調(diào)函數(shù)。

$(function(){
  $("#btn").click(function(){
    $.getScript("www.manyiaby.com", function(){
      alert("操作完成");
    });
  });
});

4、使用get()方法時，采用GET方式向服務(wù)器請求數(shù)據(jù)，并通過方法中回調(diào)函數(shù)的參數(shù)返回請求的數(shù)據(jù)，它的調(diào)用格式如下：$.get(url,[callback])參數(shù)url為服務(wù)器請求地址，可選項callback參數(shù)為請求成功后執(zhí)行的回調(diào)函數(shù)。

$(function(){
  $("#btn").click(function(){
    $.get("www.manyiaby.com", function(data){
      alert(data.name);
    }, "json");
  });
});

5、與get()方法相比，post()方法多用于以POST方式向服務(wù)器發(fā)送數(shù)據(jù)，服務(wù)器接收到數(shù)據(jù)之后，進行處理，并將處理結(jié)果返回頁面，調(diào)用格式如下：$.post(url,[data],[callback])參數(shù)url為服務(wù)器請求地址，可選項data為向服務(wù)器請求時發(fā)送的數(shù)據(jù)，可選項callback參數(shù)為請求成功后執(zhí)行的回調(diào)函數(shù)。

$(function(){
  $("#btn").click(function(){
    $.post("www.manyiaby.com",{name:"滿藝網(wǎng)", url:"www.manyiaby.com"}, function(data){
      alert(data);
    });
  });
});

6、使用serialize()方法可以將表單中有name屬性的元素值進行序列化，生成標準URL編碼文本字符串，直接可用于ajax請求，它的調(diào)用格式如下：$(selector).serialize()其中selector參數(shù)是一個或多個表單中的元素或表單元素本身。

$(function(){
  $("#btn").click(function(){
    alert($("form").serialize());
  });
});

7、使用ajax()方法是最底層、功能最強大的請求服務(wù)器數(shù)據(jù)的方法，它不僅可以獲取服務(wù)器返回的數(shù)據(jù)，還能向服務(wù)器發(fā)送請求并傳遞數(shù)值，它的調(diào)用格式如下：jQuery.ajax([settings])或$.ajax([settings])其中參數(shù)settings為發(fā)送ajax請求時的配置對象，在該對象中，url表示服務(wù)器請求的路徑，data為請求時傳遞的數(shù)據(jù)，dataType為服務(wù)器返回的數(shù)據(jù)類型，success為請求成功的執(zhí)行的回調(diào)函數(shù)，type為發(fā)送數(shù)據(jù)請求的方式，默認為get。

$(function(){
  $("#btn").click(function(){
    $.ajax({
      url:"www.manyiaby.com",
      dataType:"text",
      data:{name:"滿藝網(wǎng)", url:"wwww.manyiaby.com"},
      success:function(data){
        alert(data);
      }
    });
  });
});

8、使用ajaxSetup()方法可以設(shè)置Ajax請求的一些全局性選項值，設(shè)置完成后，后面的Ajax請求將不需要再添加這些選項值，它的調(diào)用格式為：jQuery.ajaxSetup([options])或$.ajaxSetup([options])可選項options參數(shù)為一個對象，通過該對象設(shè)置Ajax請求時的全局選項值。

$(function () {
  $.ajaxSetup({
    dataType:"text",
    success:function(data){
      alert(data);
    }
  });
  $("#btn").bind("click", function () {
    $.ajax({
      data: {name: "滿藝網(wǎng)", url: "www.manyiaby.com"},
        url: "www.manyiaby.com"
       });
    })
  });
});

9、ajaxStart()和ajaxStop()方法是綁定Ajax事件。ajaxStart()方法用于在Ajax請求發(fā)出前觸發(fā)函數(shù)，ajaxStop()方法用于在Ajax請求完成后觸發(fā)函數(shù)。它們的調(diào)用格式為：$(selector).ajaxStart(function())和$(selector).ajaxStop(function())其中，兩個方法中括號都是綁定的函數(shù)，當發(fā)送Ajax請求前執(zhí)行ajaxStart()方法綁定的函數(shù)，請求成功后，執(zhí)行ajaxStop ()方法綁定的函數(shù)。

$(function () {
  $.ajaxStart(function (){
    alert("正在請求數(shù)據(jù)...");
  });
  $.ajaxStop(function (){
    alert("數(shù)據(jù)請求完成！");
  });
  $("#btn").bind("click", function () {
    $.ajax({
      url: "www.manyiaby.com",
      dataType: "json",
      success: function (data) {
        alert("姓名："+data.name);
       }
     });
  })
});

10、定義一個json對象，用于保存學生的相關(guān)資料，通過$.each()工具函數(shù)，獲取數(shù)組中各元素的名稱與內(nèi)容，顯示在頁面中。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <title>練習</title>
  </head>
  <body>
  <button>按鈕</button>
  <script type="text/javascript">
    $(function () {
      $("button").bind("click", function () {
        var jsonDate = [{name:"滿藝網(wǎng)", url:"www.manyiaby.com"}];
        $.each(jsonDate, function(index, data){
          alert(data.name);
        });
      })
    });  
  </script>
  </body>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！