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 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
jQuery Div中加载其他页面的实现代码
Feb 27 Javascript
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 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写入数据到CSV文件的方法
2015/03/14 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
jQuery 注意事项 与原因分析
2009/04/24 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
checkbox使用示例
2013/08/23 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
python生成词云的实现方法(推荐)
2017/06/13 Python
python编写分类决策树的代码
2017/12/21 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
Python理解递归的方法总结
2019/01/28 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
python里glob模块知识点总结
2021/01/05 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
销售总监岗位职责
2014/01/04 职场文书
民事和解协议书格式
2014/11/29 职场文书
学生保证书
2015/01/16 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python