jQuery中使用Ajax獲取JSON格式數(shù)據(jù)示例代碼

更新時(shí)間：2013年11月26日 16:57:53 作者：

有時(shí)候我們需要讀取JSON格式的數(shù)據(jù)文件，在jQuery中可以使用Ajax或者 $.getJSON()方法實(shí)現(xiàn)，下面有個(gè)不錯(cuò)的示例，需要的朋友可以參考下

JSON(JavaScript Object Notation)是一種輕量級的數(shù)據(jù)交換格式。JSONM文件中包含了關(guān)于“名稱”和“值”的信息。有時(shí)候我們需要讀取JSON格式的數(shù)據(jù)文件，在jQuery中可以使用Ajax或者 $.getJSON()方法實(shí)現(xiàn)。

下面就使用jQuery讀取music.txt文件中的JSON數(shù)據(jù)格式信息。
首先，music.txt中的內(nèi)容如下：

復(fù)制代碼代碼如下:

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

下來是HTML代碼：

復(fù)制代碼代碼如下:

 
<div>點(diǎn)擊按鈕獲取JSON數(shù)據(jù)</div> 
<input type="button" id="button" value="確定" /> 
<div id="result"></div> 

使用Ajax獲取JSON數(shù)據(jù)的jQuery代碼：

復(fù)制代碼代碼如下:

 
$(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; 
}); 
}); 

當(dāng)然，也可以使用$.getJSON()方法，代碼簡潔一點(diǎn)：

復(fù)制代碼代碼如下:

 
$(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; 
}); 
}); 

您可能感興趣的文章:

相關(guān)文章

jquery html動(dòng)態(tài)添加的元素綁定事件詳解
下面小編就為大家?guī)硪黄猨query html動(dòng)態(tài)添加的元素綁定事件詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
jquery向后臺提交數(shù)組的代碼分析
在本篇文章里小編給大家整理的是一篇關(guān)于jquery向后臺提交數(shù)組的相關(guān)知識點(diǎn)內(nèi)容，需要的朋友們可以參考學(xué)習(xí)下。
2020-02-02
jQuery基礎(chǔ)知識點(diǎn)總結(jié)(DOM操作)
下面小編就為大家?guī)硪黄猨Query基礎(chǔ)知識點(diǎn)總結(jié)(DOM操作)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
基于jQuery的計(jì)算文本框字?jǐn)?shù)的代碼
用戶邊輸入計(jì)算同時(shí)進(jìn)行，告訴用戶還剩余多少可輸入的字?jǐn)?shù),當(dāng)超過規(guī)定的字?jǐn)?shù)后，點(diǎn)擊確定，會(huì)讓輸入框閃動(dòng)
2012-06-06
jQuery如何封裝輸入框插件
這篇文章主要介紹了jQuer輸入框插件封裝方法，這樣可以提高程序員的開發(fā)效率，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
jquery監(jiān)聽div內(nèi)容的變化具體實(shí)現(xiàn)思路
在開發(fā)過程中遇到了上面標(biāo)題列出的問題：如何監(jiān)聽div內(nèi)容的變化，下面是具體的解決思路，感興趣的朋友可以參考下
2013-11-11
基于jquery的可多選的下拉列表框
同事在網(wǎng)上的找的下拉列表框出現(xiàn)位置不對的和加載慢的BUG，反正多選下拉列表框?qū)崿F(xiàn)也很簡單，與其看那些結(jié)構(gòu)混亂的代碼，不如自己重新實(shí)現(xiàn)一個(gè)
2012-07-07
jquery實(shí)現(xiàn)左右滑動(dòng)菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)左右滑動(dòng)菜單效果代碼,涉及jquery鼠標(biāo)事件及頁面元素動(dòng)態(tài)變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
jquery實(shí)現(xiàn)個(gè)人中心導(dǎo)航菜單效果和美觀都非常不錯(cuò)
這是一款由jquery開發(fā)的導(dǎo)航菜單。適合放在門戶網(wǎng)站的個(gè)人用戶中心后臺。效果和美觀都非常不錯(cuò)
2014-09-09
JQuery中$.each 和$(selector).each()的區(qū)別詳解
這篇文章主要介紹了JQuery中$.each 和$(selector).each()的區(qū)別詳解,本文給出了多個(gè)例子講解了它們之間的不同之處,需要的朋友可以參考下
2015-03-03