jQuery中使用Ajax获取JSON格式数据示例代码.pdf
需积分: 46 71 浏览量
2018-02-11
13:34:15
上传
评论 1
收藏 145KB PDF 举报
jQuery中使⽤Ajax获取JSON格式数据⽰例代码
JSON(JavaScript Object Notation)是⼀种轻量级的数据交换格式。JSONM⽂件中包含了
关于“名称”和“值”的信息。有时候我们需要读取JSON格式的数据⽂件，在jQuery中可
以使⽤Ajax或者 $.getJSON()⽅法实现。
下⾯就使⽤jQuery读取music.txt⽂件中的JSON数据格式信息。
⾸先，music.txt中的内容如下：
代码如下:
[
{"optionKey":"1", "optionValue":"Canon in D"},
{"optionKey":"2", "optionValue":"Wind Song"},
{"optionKey":"3", "optionValue":"Wings"}
]
下来是HTML代码：
代码如下:
<div>点击按钮获取JSON数据</div>
<input type="button" id="button" value="确定" />
<div id="result"></div>
使⽤Ajax获取JSON数据的jQuery代码：
代码如下:
$(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);
资源评论
kevin_feng老师
- 粉丝: 28
- 资源: 18
