jquery獲取json資料簡單介紹

在實際應用中獲取json格式的資料是常見的操作，下面就介紹一下如何利用jquery實現。

分別使用$.getJSON()和$.ajax()即可實現此功能。

一.建立一個json檔案:

內容如下:

[JavaScript] 純文字檢視 複製程式碼
{
  "webName" : "螞蟻部落",
  "target" : "分享互助"
}

二.$.getJSON()函式獲取:

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
$(function() {
  $.getJSON('data.json', function(data) {
    var items = [];
    $.each(data, function(key, val) {
      items.push('<li id="' + key + '">' + val + '</li>');
    });
    $('<ul/>', {
      'class': 'list',
      html: items.join('')
    }).appendTo('body');
  });
});

三.$.ajax()函式獲取:

[JavaScript] 純文字檢視 複製程式碼
$.ajax({
    url: 'data.json',
    dataType: 'json',
    success: function(data) {
      var items = [];
      $.each(data, function(key, val) {
        items.push('<li id="' + key + '">' + val + '</li>');
      });
      $('<ul/>',{
        'class': 'list',
        html: items.join('')
      }).appendTo('body');
    },
    statusCode: {
      404: function() {
        alert("沒有找到相關檔案~~");
      }
    }
  });
});