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 相关文章推荐
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 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
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
php自定义分页类完整实例
2015/12/25 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
Smarty3配置及入门语法
2017/02/22 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
php微信开发之谷歌测距
2018/06/14 PHP
jquery 循环显示div的示例代码
2013/10/18 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
JavaScript canvas实现雪花随机动态飘落
2020/02/08 Javascript
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
Python bisect模块原理及常见实例
2020/06/17 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
联想德国官网:Lenovo Germany
2018/07/04 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
祖国在我心中演讲稿
2014/01/15 职场文书
服务之星获奖感言
2014/01/21 职场文书
房产买卖委托公证书
2014/04/04 职场文书
请假条怎么写
2014/04/10 职场文书
班级口号大全
2014/06/09 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
15个值得收藏的JavaScript函数
2021/09/15 Javascript