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 ...
随机推荐
- 微信支付【get_brand_wcpay_request:fail_invalid appid】
微信支付授权目录一定要注意大小写 艹 如下的WXPay2 千万不要写成WxPay2了 参考地址:http://q.cnblogs.com/q/70405/ 微信支付代码下载:http://files. ...
- HDU1247 Hat’s Words(Trie的动态内存版本)
Hat’s Words Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tota ...
- SRM 403(1-250pt, 1-500pt)
DIV1 250pt 题意:称各个数位只含有4和7的数为lucky number,给定a,b,求[a, b]中的lucky number有多少个.a, b <= 10^9 解法:很明显的数位dp ...
- zzuoj 10408: C.最少换乘【最短路dijkstra】
10408: C.最少换乘 Time Limit: 2 Sec Memory Limit: 128 MBSubmit: 31 Solved: 8[Submit][Status][Web Board ...
- UVA 10820 - Send a Table 数论 (欧拉函数)
Send a Table Input: Standard Input Output: Standard Output When participating in programming contest ...
- 虚拟机linux配置nginx 为什么win7通过Ip访问不到
第一步,你应该先检查网络win机ping linux机,通了进行下一步第二步,检查端口netstat -antl | grep 你开启的服务端口比如你开了http,那就是80端口或者你自定义的端口,我 ...
- Linux散列表(二)——宏
散列表宏承接了双向链表宏的风范,好使好用!务必区分“结点”和“元素”!双链表宏博文中已经提及,这里不赘述! 1.获取元素(结构体)基址 #define hlist_entry(ptr, type, m ...
- winform combobox控件绑定 分类: WinForm 2014-04-17 14:34 118人阅读 评论(0) 收藏
想要达到的效果:把数据库中的一列数据绑定到combobox控件中. 数据库表:T_Task//任务表 列名:Task_Name//名称 主键:Task_ID combobox控件名称:cbName 解 ...
- lvs+heartbeat搭建负载均衡高可用集群
[172.25.48.1]vm1.example.com [172.25.48.4]vm4.example.com 集群依赖软件:
- 模板-->中国剩余定理[互质版本]
如果有相应的OJ题目,欢迎同学们提供相应的链接 相关链接 所有模板的快速链接 扩展欧几里得extend_gcd模板 poj_1006_Biorhythms,my_ac_code 简单的测试 None ...