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 相关文章推荐
javascript prototype 原型链
Mar 12 Javascript
js Date自定义函数 延迟脚本执行
Mar 10 Javascript
JQuery获取浏览器窗口内容部分高度的代码
Feb 24 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
网页右侧悬浮滚动在线qq客服代码示例
Apr 28 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 Javascript
javascript实现行拖动的方法
May 27 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
Javascript实现秒表计时游戏
May 27 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实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
php报错502badgateway解决方法
2019/10/11 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
Python中的引用和拷贝浅析
2014/11/22 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
python生成ppt的方法
2018/06/07 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
wxpython绘制圆角窗体
2019/11/18 Python
Python3常用内置方法代码实例
2019/11/18 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
创业资金计划书
2014/02/06 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
志愿者工作心得体会
2016/01/15 职场文书
MySQL七种JOIN类型小结
2021/10/24 MySQL