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 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
node.js调用C++函数的方法示例
Sep 21 Javascript
ES6基础之默认参数值
Feb 21 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 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 @ at 记号的作用示例介绍
2014/10/10 PHP
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
JavaScript模拟push
2016/03/06 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
青年创业培训欢迎词
2014/01/10 职场文书
机械专业求职信范文
2014/07/15 职场文书
会计师事务所实习证明
2014/11/16 职场文书
初中学生操行评语
2014/12/26 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
投标承诺函范文
2015/01/21 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS
nginx容器方式反向代理实战
2022/04/18 Servers