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函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
js实现蒙版效果
Jan 11 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
学习使用curl采集curl使用方法
2012/01/11 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
JavaScript 大数据相加的问题
2011/08/03 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
javascript自执行函数
2017/02/10 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
Python操作列表之List.insert()方法的使用
2015/05/20 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
霸王洗发水广告词
2014/03/14 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
使用tensorflow 实现反向传播求导
2021/05/26 Python
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android