首先是这样一个问题:我先是直接用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>
问题解决。
补充:原来写的ajax请求时没有加:dataType:"json",加上后问题解决