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数组