jQuery中使用Ajax获取JSON格式数据
本文由发表于7年前 | Javascript | 评论数 6 |  被围观 33,954 views+

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);
			}
		});
		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;
	});
});
除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/jquery-json-format-to-use-ajax-to-get-the-data.html
关键字: , ,
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2011 5/17
文章评论
    6条评论
  1. win 2012年10月05日10:16:25  #-49楼 回复 回复

    您好,請問我在試做這個範例時,在console出現這樣的log
    XMLHttpRequest cannot load file:///C:/Users/user/Desktop/pra/music.txt. Origin null is not allowed by Access-Control-Allow-Origin.

    請問會是什麼原因?
    謝謝:D

    • arthinking 2012年10月06日16:48:04 回复 回复

      不能用Javascript直接访问本地文件,把music.txt放到服务器中,然后访问服务器吧。

  2. johnp 2012年12月19日16:12:18  #-48楼 回复 回复

    本地测试貌似只有FF支持,其他的浏览器都报错

  3. carl 2013年01月08日17:01:14  #-47楼 回复 回复

    纠结浏览器跨域问题~~

  4. leeyea 2014年02月26日15:44:53  #-46楼 回复 回复

    应该没测试过demo吧?
    首先你在构造html结构的时候就有问题……

给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 Eclipse下搭建Python开发环境 2014/2/28
2 Java基础笔记 – Object类的介绍 2011/10/28
3 在Linux中安装JDK和配置环境变量 2012/7/31
4 ExtJS使用ColumnModel创建表格和使用ArrayReader解析数组 2011/5/9
5 JDBC数据库连接和事务的管理 一个JDBC基本操作封装类的编写 2011/10/13
6 Java基础笔记 – 通过反射机制修改类中的私有属性的值 2011/10/8
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.