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 相关文章推荐
根据出生日期自动取得星座的js代码
Jul 20 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
了解JavaScript中let语句
May 30 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
解决vue-router 嵌套路由没反应的问题
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实现的简单日志写入函数
2015/03/31 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
用vue构建多页面应用的示例代码
2017/09/20 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
Python批量修改文本文件内容的方法
2016/04/29 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
简述数组与指针的区别
2014/01/02 面试题
数据库方面面试题
2012/04/22 面试题
如何做好总经理助理
2013/11/12 职场文书
白鹤梁导游词
2015/02/06 职场文书
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang