jQuery 取得 json 的資料

jQuery(跨網頁)取得JSON資料的處理方式有二

  $.getJSON('url','parameters/data',callback);
  $.ajax(options);

第一種方法比較簡單，也是jQuery提供的現呈函式，可以參考官網jQuery.getJSON的說明
而個人還是偏好第二種方法，可以控制的參數較多，而第二種方法除了JSON外，也能傳遞其他類型的變數，使用起來較為靈活，因此接下來的介紹也以此方法為主。
   
$.ajax({
  url: "URL",
  type: "GET",
  dataType: "json",
  success: function(Jdata) {
    alert("SUCCESS!!!");
  },
 
  error: function() {
    alert("ERROR!!!");
  }
});

大致上的語法如上，而使用到的指令其實也蠻直觀的

    url：
    資料來源的網址。
    type：
    以GET或是POST傳遞就看每個人的需求啦。
    datatype：
    這裡的分類就多了，以本篇來說自是用『json』，但其它尚有data、xml、…；其功能自然是以"填入的datatype"格式來讀取從URL傳來的資料內容嘍，可以參考官網jQuery.ajax()的說明。
    success/error：
    可有可無，用意在避免連線失敗時出現錯誤，原則上，這裡就可以開始下達後續要執行的指令了。
        success:function(Jdata)
        這裡的變數Jdata便是存放URL傳過來被設定的dataType格式內容

   
  //假設傳入的JSON內容如下：
  JData = [{ name: "Wing", age: "20", height: "182" },
           { name: "Wind", age: "18", height: "165" },
           { name: "Edge", age: "25", height: "171" }]
 
  //我們可以透過.length得知其中的物件數
  var NumOfJData = JData.length; //NumOfJData=3
 
  //利用alert來逐筆將資料以message window的方式傳出
  for (var i = 0; i < NumOfJData; i++) {
    alert(JData[i]["name"]);   //i=0→Wing; i=1→Wind; i=2→Edge
    alert(JData[i]["age"]);    //i=0→20;   i=1→18;   i=2→25
    alert(JData[i]["height"]); //i=0→182;  i=1→165;  i=2→171
  }
 
  //或是用下面的的方法呼叫，
  //這個範例比較適合用在物件陣列中的鍵值數量、及名稱的不同的時候
  //除非是特殊需求，不然應該是不會有人這麼做
  for (var i = 0; i < NumOfJData; i++) {
    for (var idx_Key in JData[i]) {
      //以本例而言，自然分別會是：name、age、height
      alert(JData[i][idx_Key]);
    }
  }

若是想要進一步的讓它畫成表格的話，可以這麼做

  var i = 0;
  //這裡改用.each這個函式來取出JData裡的物件
  $.each(JData, function() {
    //呼叫方式也稍微改變了一下，意思等同於上述的的JData[i]["idx_Key"]
    $("#JSON_table").append("<tr>" +
                            "<td>" + JData[i].name   + "</td>" +
                            "<td>" + JData[i].age    + "</td>" +
                            "<td>" + JData[i].height + "</td>" +
                            "</tr>");
    i++;
  });