关闭

jQuery获取json数据

标签: AjaxjQueryJSON
149人阅读 评论(0) 收藏 举报
首先,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);
			}
		});
		return false;
	});
});
当然,也可以使用$.getJSON()方法,代码简洁一点:
$(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;
	});
});
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:7422次
    • 积分:200
    • 等级:
    • 排名:千里之外
    • 原创:9篇
    • 转载:17篇
    • 译文:0篇
    • 评论:2条
    最新评论