亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間：2013年11月26日 16:57:53   作者：  
有時候我們需要讀取JSON格式的數(shù)據(jù)文件，在jQuery中可以使用Ajax或者 $.getJSON()方法實現(xiàn)，下面有個不錯的示例，需要的朋友可以參考下
JSON(JavaScript Object Notation)是一種輕量級的數(shù)據(jù)交換格式。JSONM文件中包含了關(guān)于“名稱”和“值”的信息。有時候我們需要讀取JSON格式的數(shù)據(jù)文件，在jQuery中可以使用Ajax或者 $.getJSON()方法實現(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>點擊按鈕獲取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;
});
});

當然，也可以使用$.getJSON()方法，代碼簡潔一點：
復(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)文章

  • JQ選擇器_選擇同類元素的第N個子元素的實現(xiàn)方法

    JQ選擇器_選擇同類元素的第N個子元素的實現(xiàn)方法

    下面小編就為大家?guī)硪黄狫Q選擇器_選擇同類元素的第N個子元素的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-09
  • jquery中filter方法用法實例分析

    jquery中filter方法用法實例分析

    這篇文章主要介紹了jquery中filter方法用法,實例分析了filter方法的功能并對比了與find方法的區(qū)別,需要的朋友可以參考下
    2015-02-02
  • jquery中cookie用法實例詳解(獲取,存儲,刪除等)

    jquery中cookie用法實例詳解(獲取,存儲,刪除等)

    這篇文章主要介紹了jquery中cookie用法,結(jié)合實例詳細分析了jQuery操作cookie的獲取,存儲,刪除等操作,并附帶了Jquery操作Cookie記錄用戶查詢過信息實現(xiàn)方法,需要的朋友可以參考下
    2016-01-01
  • jQuery Tree Multiselect使用詳解

    jQuery Tree Multiselect使用詳解

    這篇文章主要為大家詳細介紹了jQuery Tree Multiselect的使用方法，這個插件允許用戶以樹型的形式來呈現(xiàn)列表復(fù)選框的選擇，多用于權(quán)限管理中用于分配不同的權(quán)限，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-05-05
  • jquery插件制作教程 txtHover

    jquery插件制作教程 txtHover

    該系列文章是我閱讀<jQuery Plugin Development Beginner's Guide>后的總結(jié)，有興趣的朋友可以去讀原版的書籍
    2012-08-08
  • 基于jquery的超簡單上下翻

    基于jquery的超簡單上下翻

    簡單上下翻，函數(shù)，獲取元素。
    2010-04-04
  • JQuery解析XML數(shù)據(jù)的幾個簡單實例

    JQuery解析XML數(shù)據(jù)的幾個簡單實例

    下面小編就為大家?guī)硪黄狫Query解析XML數(shù)據(jù)的幾個簡單實例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05
  • jquery插件開發(fā)方法(初學者)

    jquery插件開發(fā)方法(初學者)

    現(xiàn)在jquery是比較流行的組件了，大家可以通過擴展插件的方法自定義功能，大家可以參考下面的方法制作自己的插件
    2012-02-02
  • jQuery動態(tài)操作表單示例【基于table表格】

    jQuery動態(tài)操作表單示例【基于table表格】

    這篇文章主要介紹了jQuery動態(tài)操作表單,結(jié)合實例形式分析了jQuery針對table表格的數(shù)據(jù)添加、刪除、元素修改、提交等相關(guān)操作技巧,需要的朋友可以參考下
    2018-12-12
  • 表單驗證插件Validation應(yīng)用的實例講解

    表單驗證插件Validation應(yīng)用的實例講解

    這篇文章的內(nèi)容是表單驗證插件Validation應(yīng)用的實例講解，需要的朋友可以參考下
    2015-10-10

最新評論