jquery遍历json对象集合详解

前端技术 2023/09/02 JavaScript

本文实例采用案例分析的方法介绍了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对象集合的方法，真正理解，希望这篇文章可以帮助到大家。

本文地址：https://www.stayed.cn/item/4794

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案