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控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
深入理解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
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
简述JS控制台的使用
2018/07/15 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
python基于Selenium的web自动化框架
2019/07/14 Python
下载官网python并安装的步骤详解
2019/10/12 Python
Python标准库itertools的使用方法
2020/01/17 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
印刷技术专业自荐信
2014/09/18 职场文书
房屋所有权证明
2014/10/20 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python