Jquery通过$.post获取数据,$.each解析Json数组
($.post,$.get,$.getJSON,$.ajax等等 解析json的原理都一样)
$.each循环遍历解析Json数组
01 | //以下结果,请在console控制台中查看(F12或者审查元素,即可进入Console控制台) |
02 | //Jquery接收Post/Get返回值, $.each直接解析Json数组 |
03 |
04 | //($.post,$.get,$.getJSON,$.ajax等等 解析json的原理都一样) |
05 | $.post( '你的URL' , { action: 'GetList' }, function (data) { |
06 | //此post请求为异步,上面是模拟的测试地址,正式使用时,请换成自己的接口地址 |
07 | //为了方便,在这里我直接赋值咯 |
08 | data = [{ "Name" : "Json在线工具" , "ProUrl" : "www.yunjson.com" , "SiteInfo" : "Json在线工具(http://www.yunjson.com)" }, { "Name" : "Json在线解析" , "ProUrl" : "www.yunjson.com" , "SiteInfo" : "Json在线解析(http://www.yunjson.com)" }, { "Name" : "Json在线格式化" , "ProUrl" : "www.yunjson.com" , "SiteInfo" : "Json在线格式化(http://www.yunjson.com)" }] |
09 | if (data) { |
10 | //接收数据成功,开始处理json对象(此时data就是接收到的json数组) |
11 | //现在我们可以得到json数据中,需要循环得到每个json对象 |
12 | //为了方便查看,直接在控制台中打印出来咯 |
13 | $.each(data, function (index, item) { |
14 | //此时可以得到每个json对象哦,接下来的操作就交给大家了 |
15 | console.log(data.Name); |
16 | console.log(data.ProUrl); |
17 | console.log(data.SiteID); |
18 | console.log(data.SiteLink); |
19 | console.log(data.SiteInfo); |
20 | }); |
21 | } |
22 | }, 'json' ); |
23 | //下面来模拟下输出值(由于没有测试地址,在下面就直接赋值了) |
24 | var data = [{ "Name" : "Json在线工具" , "ProUrl" : "www.yunjson.com" , "SiteInfo" : "Json在线工具(http://www.yunjson.com)" }, { "Name" : "Json在线解析" , "ProUrl" : "www.yunjson.com" , "SiteInfo" : "Json在线解析(http://www.yunjson.com)" }, { "Name" : "Json在线格式化" , "ProUrl" : "www.yunjson.com" , "SiteInfo" : "Json在线格式化(http://www.yunjson.com)" }] |
25 | console.log( "第一种用法:Jquery中,$.each直接解析Json数组" ); |
26 | $.each(data, function (index, item) { |
27 | var result = item.Name "--" item.ProUrl "--" item.SiteInfo; //拼接数据,输出到控制台展示 |
28 | console.log(result); |
29 | }); |
原文链接:Jquery通过$.post获取数据,$.each解析Json数组