jquery遍历json对象集合详解


Posted in Javascript onMay 18, 2016

本文实例采用案例分析的方法介绍了jquery遍历json对象的三种情况,供大家参考,具体内容如下

第一个案例:jquery 遍历json对象集合 常用示例

jsp中

$.ajax({
        url: "${applicationScope.rootpath}common/getContractPage.html?userConId=${userConId}",
        type: "post",
        dataType:"json",
        data: {},
        success: function (jsonText) {
          if(jsonText){
            var status = jsonText.status;
            var msg = jsonText.msg;
            if(status == '500'){
              //有异常的信息时
            alert(msg);
               
            }else{
              $.each(jsonText,function(i,item){
                var pngPath = item[0];
                var pngName = item[1];
            });
               
            }
          }
        }
      });

jsonText的格式:

{"status":"200","msg":[{"id":"1","name":"n1"},{"id":"2","name":"n2"}]}
{"status":"500","msg":"异常信息"}

java中:

List pngFileList = new ArrayList();//某对象集合
if(null != pngFileList && pngFileList.size() > 0) {
JSONArray pngFileArray =JSONArray.fromObject(pngFileList);

}
if(null != pngFileArray){
this.setTextAjax(pngFileArray.toString());
//异常的格式
//this.setTextAjax("{\"status\":\"500\",\"msg\":\""+errormsg+"\"}");//没有记录

/**
* ajax返回html,包括json形式
* 
* @param responseContent
*/
public void setTextAjax(String responseContent) {
try {
HttpServletResponse response = getHttpResponse();
response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
response.setHeader("Pragma", "No-cache");
response.setHeader("Content-Type", "text/html");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
PrintWriter out = response.getWriter();
out.print(responseContent);
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
// ajaxResponse = new StringBufferInputStream(responseContent);
}

第二个案例:jQuery 遍历JSON 对象

不说别的,直接贴代码:

<script src="js/jquery-1.6.4.js" type="text/javascript"></script>
 
<script type="text/javascript">
  $(document).ready(function() {
    $("#Link").click(function() {
    var objson = "[{Title:'Sjr',Content:'Library',summary:'summary'},{Title:'Sjr',Content:'Library',summary:[{sum0:'sum0'},{sum0:'sum1'},{sum0:'sum2'}]},{Title:'Sjr',Content:'Library',summary:[{sum0:'sum0'},{sum0:'sum1'},{sum0:'sum2'}]}]";
      var obj = eval(objson);
      $(obj).each(function(index) {
        var val = obj[index];
        if (typeof (val.summary) == "object") {
          $(val.summary).each(function(ind) {
            alert(val.Title + " " + val.Content + " " + val.summary[ind].sum0);
          });
        } else {
          alert(val.Title + " " + val.Content + " " + val.summary);
        }
      });
    });
  });
</script>

第三个案例:jquery中遍历读取json串中的对象

假设我们从服务器端获取如下的json串,其中包括数组。我们该如何遍历读取呢?

{"result":null,"rows":[{"caishen":"东","fushen":"西北","huajiazi":"甲子","id":1,"nayin":"大海水","shengmen":"南","simen":"北","wugui":"西","xishen":"东南","yanggui":"西南","yingui":"东北"},{"caishen":"东北","fushen":"北","huajiazi":"乙丑","id":2,"nayin":"大林木","shengmen":"西北","simen":"西南","wugui":"东南","xishen":"东","yanggui":"西","yingui":"南"},{"caishen":"西","fushen":"东","huajiazi":"丙寅","id":3,"nayin":"石榴木","shengmen":"北","simen":"西北","wugui":"南","xishen":"东南","yanggui":"东北","yingui":"西南"}],"total":3} 

使用.each难度太高,直接js读取吧

//通过url获取json对象     
     $.post("json/godjson!godlist", function (data){ 
//data.rows返回的是json字符串。需要转换成json对象 
       var json = eval(data.rows) 
//json变量现在就是一个数组对象,直接读取每个数组对象。结合属性进行输出 
       for(var i=0; i<json.length; i++){ 
        alert(json[i].caishen+"--------- " + json[i].xishen); 
       } 
//记得返回的数据类型一定要是json类型 
    }, "json");

通过如上的方式就能获取json串的json对象并进行输出。

为大家分享这么多的案例,就是想帮助大家掌握jquery遍历json对象集合的方法,真正理解,希望这篇文章可以帮助到大家。

Javascript 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
JavaScript 类似flash效果的立体图片浏览器
Feb 08 Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
详解javascript中的事件处理
Nov 06 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
Vue中插入HTML代码的方法
Sep 21 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 #Javascript
js验证框架实现代码分享
May 18 #Javascript
在JavaScript中对HTML进行反转义详解
May 18 #Javascript
深入理解JavaScript中的浮点数
May 18 #Javascript
Node.js返回JSONP详解
May 18 #Javascript
noty ? jQuery通知插件全面解析
May 18 #Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 #Javascript
You might like
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
PHP 地址栏信息的获取代码
2009/01/07 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
splice slice区别
2006/10/09 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
javascript实现控制文字大中小显示
2015/04/28 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
巧用canvas
2017/01/21 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
python+mysql实现简单的web程序
2014/09/11 Python
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
python简单分割文件的方法
2015/07/30 Python
python开发中module模块用法实例分析
2015/11/12 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
高中体育教学反思
2014/01/29 职场文书
师范生求职自荐信
2014/06/14 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
房屋所有权证明
2015/06/19 职场文书
农村老人去世追悼词
2015/06/23 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
Python 多线程处理任务实例
2021/11/07 Python
python解析照片拍摄时间进行图片整理
2022/07/23 Python