前台解析有后台传过来的json数据时报错 Cannot use 'in' operator to search for 'length' in......-优快云博客

本文介绍了使用Spring MVC进行JSON数据交互的方法，对比了@ResponseBody注解和纯Java方式的不同，并解决了前端解析JSON数据时出现的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先是这样一个问题：我先是直接用springMVC的@ResponseBody将数据自动转化成json格式的数据出给后台，看代码

后台Controller代码：

@RequestMapping("/JsonTest")
    @ResponseBody
    public List<Books> JsonTest(Model model,@RequestParam("value") int value){
    	System.out.println("ajax 请求"+value);
    	List<Books> list=bookService.selectAll();
    	//model.addAttribute("books",list);
    	//System.out.println(list);
    	return list;
    }

前台解析的ajax代码：

<script type="text/javascript">
    $(function(){
       $.ajax({
            url:"/AccountBook/books/JsonTest",/*请求的地址*/
            data:"value=12",/*数据携带*/
            type:"get",/*请求的方式*/
            success:function(result){/*请求后得到的结果*/
             console.log(result);
             build_books_table(result);
              
            }
       });
    
    });
    function build_books_table(result){
    $.each(result,function(index,item){
    var name=$("<td></td>").append(item.name);
    var phoneNum=$("<td></td>").append(item.phoneNum);
    var money=$("<td></td>").append(item.money);
     var type=$("<td></td>").append(item.type);
      var date=$("<td></td>").append(item.date); 
      var editButton=$("<button></button>").addClass("btn btn-primary btn-sm").append("编辑");
      var deleteBtn=$("<button></button>").addClass("btn btn-danger btn-sm").append("删除");
      var btn=$("<td></td>").append(editButton).append(deleteBtn);
      $("<tr></tr>").append(name)
                    .append(phoneNum)
                    .append(money)
                    .append(type)
                    .append(date)
                    .append(btn)
                    .appendTo("#books_table tbody");
    });
    }
  </script>

这样的前后搭配是没有任何问题的，不会报错，但是当我不用@ResponseBody分装json，而改用纯java时，代码如下：

@RequestMapping("/JsonTest2")
	public void JsonTest(HttpServletResponse response) throws IOException{
	   List<Books> list=bookService.selectAll();
	   response.getWriter().write(JSONArray.fromObject(list).toString());
    }

前台解析还是上边的代码时会报出Cannot use 'in' operator to search for 'length' in......的错误，最后通过百度说要将JSON字符串转换为JavaScript对象。可通过标准JSON.parse()或jQuery 的 $.parseJSON 将其转换为JavaScript对象。所以最后将前台代码改成：

<script type="text/javascript">
    $(function(){
       $.ajax({
            url:"/AccountBook/books/JsonTest2",/*请求的地址*/
            data:"value=12",/*数据携带*/
            type:"get",/*请求的方式*/
            success:function(result){/*请求后得到的结果*/
             console.log(result);
             build_books_table(result);
              
            }
       });
    
    });
    function build_books_table(result){
    $.each(JSON.parse(result),function(index,item){//这里发生了改变
    var name=$("<td></td>").append(item.name);
    var phoneNum=$("<td></td>").append(item.phoneNum);
    var money=$("<td></td>").append(item.money);
     var type=$("<td></td>").append(item.type);
      var date=$("<td></td>").append(item.date); 
      var editButton=$("<button></button>").addClass("btn btn-primary btn-sm").append("编辑");
      var deleteBtn=$("<button></button>").addClass("btn btn-danger btn-sm").append("删除");
      var btn=$("<td></td>").append(editButton).append(deleteBtn);
      $("<tr></tr>").append(name)
                    .append(phoneNum)
                    .append(money)
                    .append(type)
                    .append(date)
                    .append(btn)
                    .appendTo("#books_table tbody");
    });
    }
  </script>JSON.parse(result),function(index,item){//这里发生了改变
    var name=$("<td></td>").append(item.name);
    var phoneNum=$("<td></td>").append(item.phoneNum);
    var money=$("<td></td>").append(item.money);
     var type=$("<td></td>").append(item.type);
      var date=$("<td></td>").append(item.date); 
      var editButton=$("<button></button>").addClass("btn btn-primary btn-sm").append("编辑");
      var deleteBtn=$("<button></button>").addClass("btn btn-danger btn-sm").append("删除");
      var btn=$("<td></td>").append(editButton).append(deleteBtn);
      $("<tr></tr>").append(name)
                    .append(phoneNum)
                    .append(money)
                    .append(type)
                    .append(date)
                    .append(btn)
                    .appendTo("#books_table tbody");
    });
    }
  </script>

问题解决。

补充：原来写的ajax请求时没有加：dataType:"json"，加上后问题解决