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表格内容过滤的实现方法
Jul 05 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
详解React 条件渲染
Jul 08 Javascript
JavaScript中交换值的10种方法总结
Aug 18 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获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
理解Python中的类与实例
2015/04/27 Python
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
python re.match()用法相关示例
2021/01/27 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
常用的HTML5列表标签
2017/06/20 HTML / CSS
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
经典优秀个人求职自荐信格式
2013/09/25 职场文书
内容编辑个人求职信
2013/12/10 职场文书
小学教师事迹材料
2014/01/13 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
工作收入证明模板
2015/06/12 职场文书
小学教育见习总结
2015/06/23 职场文书
nginx之queue的具体使用
2022/06/28 Servers