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 相关文章推荐
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
学习React中ref的两个demo示例
Aug 14 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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
php HTML无刷新提交表单
2016/04/05 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
python使用cookie库操保存cookie详解
2014/03/03 Python
Python中的ceil()方法使用教程
2015/05/14 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
windows下python连接oracle数据库
2017/06/07 Python
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
python树莓派红外反射传感器
2019/01/21 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
keras输出预测值和真实值方式
2020/06/27 Python
Python 实现微信自动回复的方法
2020/09/11 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
新闻专业应届生求职信
2013/10/31 职场文书
党员创先争优承诺书
2014/03/26 职场文书
质量承诺书怎么写
2014/05/24 职场文书
2015年林业工作总结
2015/05/14 职场文书
党小组意见范文
2015/06/08 职场文书
计算机实训心得体会
2016/01/14 职场文书
解除合同协议书范本
2016/03/21 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书