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获得选中文本内容的方法
Dec 02 Javascript
Javascript 汉字字节判断
Aug 01 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
js获得网页背景色和字体色的方法
Mar 21 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
JavaScript实现随机点名小程序
Oct 29 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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
phpwind放自动注册方法
2006/12/02 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
js获取视频时长代码
2014/04/10 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
python 自动识别并连接串口的实现
2021/01/19 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
CSS3 特效范例整理
2011/08/22 HTML / CSS
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
小学老师寄语大全
2014/04/04 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL