jquery實現的ajax請求獲取json資料程式碼

antzone發表於2017-03-20

本章節介紹一下如何通過ajax請求獲取json資料,下面就是一段這樣的程式碼例項簡單做一下演示。jquery的ajax非同步請求接收返回json資料方法設定簡單,一個是伺服器處理程式是返回json資料,另一種就是ajax傳送設定的datatype設定為jsonp格式資料或json格式都可以。

程式碼示例如下:

[JavaScript] 純文字檢視 複製程式碼
$('#send').click(function () {
  $.ajax({
    type : "GET",
    url : "a.php",
    dataType : "jsonp",
    success : function (data) {
      $.each(data.items, function (i, item) {
        $("<img class='para'/> ").attr("src", item.media.m).appendTo("#resText");
        if (i == 3) {
          return false;
        }
      });
    }
  });
});

$.ajax方法如下:

[JavaScript] 純文字檢視 複製程式碼
$.ajax({ 
  type: "POST",
  url:  ctxRoot+'FolderAction!saveInformSetting.action',
  data: 'jsonStr=' + inform_settingListStr,
  dataType: "json",
  complete: function(data){
    /*在這裡做些事情,假設返回的json資料裡有name這個屬性
    有時候可以直接data.name或者data['name']去訪問
    但有時候,卻要通過var jsonData = eval("("+data.responseText+")");
    才可以通過jsonData.name訪問,而且這種情況下,需要是complete而不是success
    */
  }
});
$.ajax(options)

這是最根本的JQuery Ajax方法,只有一個引數options,該options引數中包含了請求資訊和回撥函式的資訊。引數內容都是key:value對形式出現,並且都是可選的。

語法如下:

$.ajax({options});

url:(string)傳送請求的地址,可以是伺服器頁面也可以是WebService動作。

type:(string)請求方式,POST或GET

data:(object)向伺服器傳送請求時帶去的資料。是key:value對形式,如:{name:"grayworm",sex:"male"},如果是陣列{works:["work1","work2"]}

dataType:(string)預期返回的資料型別。xml,html,json,text等

beforeSend:(Function)傳送ajax請求前被觸發,如果返回false則取消本次請求。如果非同步請求需要顯示gif動畫,那應當在這裡設定相應<img>的可見。

相關文章