jQuery中Ajax的使用

  在使用原生Ajax發送一個請求時，過程多少有點繁瑣，jQuery中對於Ajax請求有它本身的封裝好的函數，使用起來分方便。

 在jQuery中有專門的Ajax封裝，具體參照JQuery-Ajax參考手冊網址

這裏用一段練習代碼展現下使用方法：

//使用要引入jQuery文件 <script src="../jq/jquery-1.12.4.min.js"></script>
  
$.ajax({
     url:"http://localhost:3000/users",
     type:"get",
     dataType:"json",
     data:{"id":3},
     beforeSend:function(xhr){
     console.log("before send");
 },
success:function(data){
      console.log(data);
 },
 error:function(){
      console.log("請求error");
  },
 complete:function(xhr){
      console.log("complete");
      console.log(xhr);
 }
})

關於jQuery中$.ajax() 的幾個參數介紹：

• url：請求地址；

• type：請求方法，默認爲」get"；

• dataType：服務端響應數據類型;

• contentType:請求體內容的類型，默認「application/x-www-form-urlencode」；

• data：須要傳輸到服務器的數據，若是是get則經過、url傳遞；post則經過請求體傳遞；

• timeout：請求超時時間；

• beforeSend：請求發起以前觸發；

• success：請求成功以後觸發（響應狀態碼200）；

• error：請求失敗觸發；

• complete：請求完成後觸發（無論成功與否）

jQuery中其餘請求：

• $.get()，獲取數據

  jQuery中get請求快捷方法：$.get(url,data,callback回調函數,返回的數據格式datatype);

  //發送 get請求 
  $.get("http://localhost:3000/liuyan",{"content":"hi"},
  function(data){
      console.log(data);
  });

• $.post，添加數據

  $.post(url,data,callback)

  //發送post請求  $.post(url,data,callback,datatype)
  $.post("http://localhost:3000/liuyan",{"content":"ajax","userId":1},
          function(data){
              console.log(data);
          })

• $.put，更改數據

  //put 請求
  $.ajax({
       url:"http://localhost:3000/liuyan/5",//須要在地址上標出改的主鍵
       type:"put",
       dataType:"json",
       data:{"content":"put 請求啊"},//改的內容
       success:function(data){
       console.log(data)
       }
  })

• $delete，刪除數據

  //刪除數據 delete請求
  $.ajax({
      url:"http://localhost:3000/liuyan/6",
      type:"delete",
      success:function(data){
      console.log(data);
      }
  })

  //刪除數據 delete請求
  $.ajax({
        url:"http://localhost:3000/liuyan/6",
        type:"delete",
        success:function(data){
           console.log(data);
        }
  })

• $.ajaxSetup() 方法設置全局 AJAX 默認選項。

  $.ajaxSetup({
          url:"https://localhost:3000",
          type:post
  });
  $.ajax({
         data:{"name":"value"}
  });

• 等等還有不少方法，能夠參考jquery-Ajax手冊。