jQuery中使用Ajax获取JSON格式数据示例代码


Posted in Javascript onNovember 26, 2013

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; 
}); 
});
Javascript 相关文章推荐
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 #Javascript
js 弹出框只弹一次(二次修改之后的)
Nov 26 #Javascript
JS匀速运动演示示例代码
Nov 26 #Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 #Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 #Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 #Javascript
JS判断不能为空实例代码
Nov 26 #Javascript
You might like
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
php获取根域名方法汇总
2014/10/28 PHP
php源码的使用方法讲解
2019/09/26 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
使用cx_freeze把python打包exe示例
2014/01/24 Python
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
python匿名函数的使用方法解析
2019/10/10 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
详解python中的异常和文件读写
2021/01/03 Python
英国办公用品商店:Office Outlet
2018/04/04 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
心理健康心得体会
2014/01/02 职场文书
文明班级建设方案
2014/05/15 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
职工小家建设活动方案
2014/08/25 职场文书
新兵入伍心得体会
2014/09/04 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
小学校长开学致辞
2015/07/29 职场文书
法制教育主题班会
2015/08/13 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书