jQuery擷取JSON格式資料方法

標籤：style   class   blog   c   code   java   

getJSON方法：

jQuery.getJSON(url,data,success(data,status,xhr))

$("button").click(function(){  $.getJSON("demo_ajax_json.js",function(result_data){    $.each(result_data, function(index, name_value){      $("div").append(name_value + " ");    });  });});

 

參數	描述
url	必需。規定將請求發送的哪個 URL。
data	可選。規定連同請求發送到伺服器的資料。
success(data,status,xhr)	可選。規定當請求成功時啟動並執行函數。 額外的參數： response - 包含來自請求的結果資料 status - 包含請求的狀態 xhr - 包含 XMLHttpRequest 對象

該函數是簡寫的 Ajax 函數，等價於：

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

 樣本;

JSON(JavaScript Object Notation)是一種輕量級的資料交換格式。JSONM檔案中包含了關於“名稱”和“值”的資訊。有時候我們需要讀取JSON格式的資料檔案，在jQuery中可以使用Ajax或者 $.getJSON()方法實現。

下面就使用jQuery讀取music.txt檔案中的JSON資料格式資訊。

首先，music.txt中的內容如下：

    [    {"optionKey":"1", "optionValue":"Canon in D"},      {"optionKey":"2", "optionValue":"Wind Song"},      {"optionKey":"3", "optionValue":"Wings"}      ]  

 

　　 接下來是HTML代碼：

<div>點擊按鈕擷取JSON資料</div><input type="button" id="button" value="確定" /><div id="result"></div>

 

 　  使用Ajax擷取JSON資料的jQuery代碼：

$(document).ready(function(){    $(‘#button‘).click(function(){        $.ajax({            type:"GET",            url:"music.txt",            dataType:"json",            success:function(data){                var music="<ul>";                //i表示在data中的索引位置，n表示包含的資訊的對象                $.each(data,function(i,n){                    //擷取對象中屬性為optionsValue的值                                    music+="<li>"+n["optionValue"]+"</li>";                });                music+="</ul>";                $(‘#result‘).append(music);            }        });        return false;    });});

　　 當然，也可以使用$.getJSON()方法，代碼簡潔一點：

 

    $(document).ready(function(){          $(‘#button‘).click(function(){              $.getJSON(‘music.txt‘,function(data){                  var music="<ul>";                  $.each(data,function(i,n){                      music+="<li>"+n["optionValue"]+"</li>";                  });                  music+="</ul>";                  $(‘#result‘).append(music);              });              return false;          });      });  

 

 樣本來自CSDN《jQuery中使用Ajax擷取JSON格式資料 》