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 相关文章推荐
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 Javascript
vue.js实例todoList项目
Jul 07 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
JS装饰器函数用法总结
Apr 21 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
vue 解决provide和inject响应的问题
Nov 12 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
用PHP+java实现自动新闻滚动窗口
2006/10/09 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
javascript一些不错的函数脚本代码
2008/09/10 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
大学生毕业自我评价范文分享
2013/11/07 职场文书
大学生简单自荐信
2013/11/10 职场文书
学年末自我鉴定
2014/01/21 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
任命书范本大全
2014/06/06 职场文书
2014年教师节活动总结
2014/08/29 职场文书
个人股份合作协议书
2014/10/24 职场文书
交通处罚决定书
2015/06/24 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android