jQuery ajax讀取本地json文件的實(shí)例
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)寫形式
// 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)文章
ASP.NET jQuery 實(shí)例7 通過jQuery來獲取DropDownList的Text/Value屬性值
這節(jié)我們將通過jQuery來獲取DropDownList的Text/Value屬性值,需要的朋友可以參考下2012-02-02jQuery插件Validate實(shí)現(xiàn)自定義表單驗(yàn)證
這篇文章主要介紹了jQuery插件Validate實(shí)現(xiàn)自定義表單驗(yàn)證,自定義一個(gè)驗(yàn)證方法,感興趣的小伙伴們可以參考一下2016-01-01jQuery 順便學(xué)習(xí)下CSS選擇器 奇偶匹配nth-child(even)
今天學(xué)習(xí)jQuery,看到nth-child(even)用法,特意找了下這個(gè)選擇器的用法,在CSS3標(biāo)準(zhǔn)中,用法很強(qiáng)大。2010-05-05jQuery解析json格式數(shù)據(jù)簡(jiǎn)單實(shí)例
這篇文章主要介紹了jQuery解析json格式數(shù)據(jù)的方法,結(jié)合實(shí)例分析了使用jQuery1.7.2版本的方法解析json格式數(shù)據(jù)的技巧,需要的朋友可以參考下2016-01-01跟著JQuery API學(xué)Jquery 之二 屬性
在選擇器的API學(xué)習(xí)中,走馬觀花的把選擇器過了一遍,但是選擇歸選擇,選擇出來了沒干什么事,也沒有什么用嘛2010-04-04jQuery插件實(shí)現(xiàn)非常實(shí)用的tab欄切換功能【案例】
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)非常實(shí)用的tab欄切換功能,涉及jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02將鼠標(biāo)焦點(diǎn)定位到文本框最后(代碼分享)
本文主要分享了將鼠標(biāo)焦點(diǎn)定位到文本框最后的實(shí)例代碼。具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01一款Jquery 分頁插件的改造方法(服務(wù)器端分頁)
分頁幾乎是每個(gè)外部程序必不可少的東西,在webform時(shí)代很多人都用過AspNetPager這個(gè)用戶控件吧,用的人之多其實(shí)就在于它的優(yōu)點(diǎn)2011-07-07jquery.flot.js簡(jiǎn)單繪制折線圖用法示例
這篇文章主要介紹了jquery.flot.js簡(jiǎn)單繪制折線圖用法,結(jié)合實(shí)例形式分析了jQuery插件jquery.flot.js實(shí)現(xiàn)圖形繪制的常用操作技巧,需要的朋友可以參考下2017-03-03