创建一个项目,在web目录下新建一个assets/js目录,加入jquery和json2的js文件,在lib下加入fastjson的jar文件。
Book3Controller
package com.wen.controller;import com.wen.domain.Book;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import java.util.ArrayList;import java.util.List;@Controllerpublic class Book3Controller { @RequestMapping(value = "/test3RequestBody") //@ResponseBody会将集合数据转换成json格式并将其返回给客户端 @ResponseBody public Object getJson(){ List<Book> bookList = new ArrayList<>(); bookList.add(new Book(1,"小猪猪","xiaoxiaorui")); bookList.add(new Book(2,"小猫咪","xiaoxiaorui")); return bookList; }}
index.jsp
<html><head> <title>测试返回JSON格式的数据</title> <script type="text/javascript" src="assets/js/jquery.js"></script> <script type="text/javascript" src="assets/js/json2.js"></script> <script type="text/javascript"> $(document).ready(function () { testResponseBody(); }); function testResponseBody() { $.ajax({ dataType: "json",//预期服务器返回的数据类型 type: "post",//请求方式post 或 get url: "${pageContext.request.contextPath}/test3RequestBody",//发送请求的URL字符串 contentType: "application/json",//发送信息至服务器时的内容编码格式 async: true,//默认设置下,所有请求均为异步请求。如果设置为false,则发送同步请求 success: function (data) {//请求成功的回调函数 $.each(data,function () { var tr=$("<tr align=‘center‘/>"); $("<td/>").html(this.id).appendTo(tr); $("<td/>").html(this.name).appendTo(tr); $("<td/>").html(this.author).appendTo(tr); $("#book-table").append(tr); }) }, error: function () { alert("数据加载失败") } }) } </script></head><body><table id="book-table" border="1" style="border-collapse: collapse"> <tr align="center"> <th>编号</th> <th>书名</th> <th>作者</th> </tr></table></body></html>
因为spring中,我们使用的是fastjson处理json数据,因此还需要对springmvc-config.xml和web.xml进行一些其他配置,可以参考之前关于springmvc的文章。