jQuery ajax讀取本地json文件的實(shí)例

更新時(shí)間：2017年10月31日 10:09:10 作者：草木物語(yǔ)

下面小編就為大家?guī)?lái)一篇jQuery ajax讀取本地json文件的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

json文件

{
  "first":[
    {"name":"張三","sex":"男"},
    {"name":"李四","sex":"男"},
    {"name":"王武","sex":"男"},
    {"name":"李梅","sex":"女"}
  ]
}

js：

方法一：

$.ajax({
  url: "ceshi.json",//json文件位置
  type: "GET",//請(qǐng)求方式為get
  dataType: "json", //返回?cái)?shù)據(jù)格式為json
  success: function(data) {//請(qǐng)求成功完成后要執(zhí)行的方法 
    //each循環(huán) 使用$.each方法遍歷返回的數(shù)據(jù)date
    $.each(data.first, function(i, item) {
      var str = '<div>姓名:' + item.name + '性別：' + item.sex + '</div>';
      document.write(str);
    })
  }
})

方法二：

jQuery.getJSON()是jQuery.ajax()函數(shù)的簡(jiǎn)寫(xiě)形式

// jQuery.getJSON( url [, data ] [, success ] )
$.getJSON("ceshi.json", "", function(data) {
  　 //each循環(huán) 使用$.each方法遍歷返回的數(shù)據(jù)date
    $.each(data.first, function(i, item) {
      var str = '<div>姓名:' + item.name + '性別：' + item.sex + '</div>';
      document.write(str);
    })
});

以上這篇jQuery ajax讀取本地json文件的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jquery中ajax使用error調(diào)試錯(cuò)誤的方法
這篇文章主要介紹了jquery中ajax使用error調(diào)試錯(cuò)誤的方法,實(shí)例分析了Ajax的使用方法與error函數(shù)調(diào)試錯(cuò)誤的技巧,需要的朋友可以參考下
2015-02-02
jquery根據(jù)name屬性查找的小例子
這篇文章主要介紹了jquery根據(jù)name屬性查找的小例子，有需要的朋友可以參考一下
2013-11-11
jquery api參考 visualjquery 中國(guó)線路速度快
jquery api參考 visualjquery 中國(guó)線路速度快...
2007-11-11
Jquery 焦點(diǎn)圖用于圖片展示效果代碼
今天因網(wǎng)站需要寫(xiě)了個(gè)圖片展示效果,其中用到了Jquery的data函數(shù)，剛學(xué)就被我用這了，昨天看時(shí)還覺(jué)得無(wú)甚用處，因?yàn)榭梢匀藶榈亟o一個(gè)節(jié)點(diǎn)加屬性嘛，不過(guò)省卻了幾句代碼而已。
2010-05-05
jquery中val()方法是從最后一個(gè)選項(xiàng)往前讀取的
這篇文章主要介紹了jquery中val()方法是從最后一個(gè)選項(xiàng)往前讀取的,需要的朋友可以參考下
2015-09-09
JQuery插件開(kāi)發(fā)示例代碼
JQuery插件開(kāi)發(fā)示例代碼
2013-11-11
jQuery ajax時(shí)間差導(dǎo)致的變量賦值問(wèn)題分析
這篇文章主要介紹了jQuery ajax時(shí)間差導(dǎo)致的變量賦值問(wèn)題,結(jié)合實(shí)例對(duì)比分析了jQuery的ajax調(diào)用中出現(xiàn)的時(shí)間差賦值問(wèn)題原因與解決方法,需要的朋友可以參考下
2016-01-01
JQuery限制復(fù)選框checkbox可選中個(gè)數(shù)的方法
這篇文章主要介紹了JQuery限制復(fù)選框checkbox可選中個(gè)數(shù)的方法,涉及jQuery操作復(fù)選框長(zhǎng)度判斷與屬性修改的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-04-04
javascript原生和jquery庫(kù)實(shí)現(xiàn)iframe自適應(yīng)高度和寬度
這篇文章主要介紹了javascript原生和jquery庫(kù)實(shí)現(xiàn)iframe自適應(yīng)內(nèi)容高度和寬度,需要的朋友可以參考下
2014-07-07
jQuery ajax動(dòng)態(tài)生成table功能示例
這篇文章主要介紹了jQuery ajax動(dòng)態(tài)生成table功能,結(jié)合具體實(shí)例形式分析了jQuery基于ajax數(shù)據(jù)交互動(dòng)態(tài)創(chuàng)建table表格的相關(guān)操作技巧,需要的朋友可以參考下
2017-06-06