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函数般调用正则
Apr 08 Javascript
JavaScript 原型学习总结
Oct 29 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
jquery easyui使用心得
Jul 07 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
详解JavaScript原型与原型链
Nov 16 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生成随机密码的三种方法小结
2010/09/04 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
JS原型链怎么理解
2016/06/27 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
python3+PyQt5实现柱状图
2018/04/24 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
Python 爬虫的原理
2020/07/30 Python
python搜索算法原理及实例讲解
2020/11/18 Python
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
大学本科生的个人自我评价
2013/12/09 职场文书
询价采购方案
2014/06/09 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
毕业生自荐信范文
2015/03/05 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python