jQuery获取JSON格式数据方法
getJSON方法:
jQuery.getJSON(url,data,success(data,status,xhr))
$("button").click(function(){
$.getJSON("demo_ajax_json.js",function(result_data){
$.each(result_data, function(index, name_value){
$("div").append(name_value + " ");
});
});
});
| 参数 | 描述 |
|---|---|
| url | 必需。规定将请求发送的哪个 URL。 |
| data | 可选。规定连同请求发送到服务器的数据。 |
| success(data,status,xhr) |
可选。规定当请求成功时运行的函数。 额外的参数:
|
该函数是简写的 Ajax 函数,等价于:
$.ajax({
url: url,
data: data,
success: callback,
dataType: json
});
示例;
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;
});
});
示例来自CSDN《jQuery中使用Ajax获取JSON格式数据》
jQuery获取JSON格式数据方法的更多相关文章
- jQuery中使用Ajax获取JSON格式数据示例代码
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...
- Jquery解析Json格式数据
今天稍微学习了一下Json,JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. JSON采用完全独立于语言的 ...
- jquery 获取json文件数据,显示到jsp页面上, 或者html页面上
[{"name":"中国工商银行","code":102},{"name":"中国农业银行",&qu ...
- jQuery调用ajax获取json格式数据
<body> <div>点击按钮获取音乐列表</div> <input type="button" id="button&quo ...
- 发送Ajax请求获取JSON格式数据
Aspx前端页面: <script type="text/javascript"> $(function () { $.getJSON("Ajax/TestA ...
- WebService返回json格式数据供苹果或者安卓程序调用
1.新建一个WebService. 2. /// <summary> /// DemoToJson 的摘要说明 /// </summary> [WebService(Names ...
- JQuery 获取json数据$.getJSON方法的实例代码
这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...
- 使用getJSON()方法异步加载JSON格式数据
使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为: jQuery. ...
- MVC4中视图获取控制器中返回的json格式数据
再开发MVC项目时,有时只需要从控制器中返回一个处理的结果,这时返回Json格式的数据非常的方便,在Controller中,提供了几种返回类型和方法,如: Content() 返回文本类型的Conte ...
随机推荐
- dll文件已经引用,但using找不到命名空间
一:问题截图 二:解决办法 1.没看到lz的代码中有Vancl.Server的dll. 2.确实有编译不过的问题,是Vancl.WindowsServices这个工程的target framework ...
- HDOJ 3466 Proud Merchants
Problem Description Recently, iSea went to an ancient country. For such a long time, it was the most ...
- 如何高性能的给UIImageView加个圆角
文/natewang(简书作者)原文链接:http://www.jianshu.com/p/268f3839d2e6著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 其实你只需要的是圆角 ...
- [置顶] VC++界面编程之--使用分层窗口实现界面皮肤
使用分层界面来实现界面皮肤的好处是:可以保证图片边缘处理不失真,且能用于异形窗口上,如一些不规则的窗口,你很难用SetWindowRgn来达到理想效果. 在很多情况下,界面的漂亮与否,取决于PS的制作 ...
- Python读写文件模式
1.r 打开只读文件,该文件必须存在. 2.r+ 打开可读写的文件,该文件必须存在. 3.w 打开只写文件,若文件存在则文件长度清为0,即该文件内容会消失.若文件不存在则建立该文件. 4.w+ 打开可 ...
- Android WebView Error – Uncaught TypeError: Cannot call method ‘getItem’ of null at
本质原因是js 没有判断dom 是否加载完毕 其实就是在dom 加载完毕之后处理事件 wv.getSettings().setDomStorageEnabled(true); 转自 蛙齋 http: ...
- ie8下$(document).on('mouseover mouseout','ul li',function(){})的bug
$(document).on('mouseover mouseout','ul li',function(){ if (event.type == 'mouseover') { c ...
- java 新建文件夹保存
String Txtname = field.getText(); File file3 =new File("D:\\MATP_robot"+&qu ...
- [Flexbox] Using order to rearrange flexbox children
Using the order property we alter the order in which flexbox children appear on the page, without ma ...
- How To Cluster Rabbit-MQ--reference
Foreword This explanation of clustering Rabbit-MQ assumes that you’ve had some experience with Rabbi ...