这里用的是spring4.1.4，jquery2.1.3，其它环境为：myeclipse2014，tomcat7，jdk7
首先，新建一个web工程，并导入springMVC的jar包（为了方便起见我直接将spring的所有jar包全导了进来），另外，我们接下来要通过@RequestBody去获取前台传递过来的json，所以我们还需要导入jackson的jar包（spring默认使用jackson处理json），
jar包导入完成后，建立整个工程的目录结构
首先看一下springMVC的配置文件springMVC-servlet.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context" xmlns:p="http://www.springframework.org/schema/p"
xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-4.1.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd"> <!-- 启用注解 -->
<mvc:annotation-driven /> <!-- 配置默认首页 -->
<mvc:view-controller path="/" view-name="index"/> <!-- 处理对静态资源的访问请求 -->
<mvc:resources location="/WEB-INF/static/js/" mapping="/js/**"/> <!-- 扫描controller注解 -->
<context:component-scan base-package="com.controller" /> <!-- 解析视图 -->
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="viewClass"
value="org.springframework.web.servlet.view.JstlView" />
<property name="prefix" value="/WEB-INF/jsps/" />
<property name="suffix" value=".jsp" />
</bean> </beans>
然后是web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<display-name>JsonDemo</display-name> <servlet>
<servlet-name>springMVC</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath*:springMVC-servlet.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet> <servlet-mapping>
<servlet-name>springMVC</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
看一下实体类：
public class User
{
private Integer id;
private String username;
private String password;
private String address; //getter and setter
}
基本配置完成后，我们先在前台通过$.post方法从后台获取list并将list中的数据插入到表格中
<table id="tab">
<tr>
<th>Id</th>
<th>username</th>
<th>password</th>
<th>address</th>
</tr>
</table>
js
$(document).ready(
function() {
//当页面载入完成后，通过$.post方法从后台获取到list数据，并将它们插入到表格中
//data是后台返回的json字符串,statusText为error或者success
$.post("user/list", function(data, statusText) { for (var i = 0; i < data.length; i++) {
var temp = "<tr>";
temp += "<td>" + data[i].id + "</td><td>"
+ data[i].username + "</td><td>"
+ data[i].password + "</td><td>"
+ data[i].address + "</td>";
$('#tab').append(temp + "</tr>");
} }, "json");
});
后台controller对应的方法
@Controller
@RequestMapping("/user")
public class JsonController
{
@RequestMapping("/list")
public String getAllUser(Model model)
{
return "list";
} @RequestMapping(value = "/list", method = RequestMethod.POST)
@ResponseBody
public String userListJson(Model model)
{
Gson gson = new Gson();
String str = gson.toJson(createUserList(5));
return str;
}
//创建5个用户
private List<User> createUserList(Integer count)
{
List<User> result = new ArrayList<User>();
for (int i = 1; i <= count; i++)
{
User user = new User();
user.setId(i);
user.setUsername("user" + i);
user.setPassword("admin" + i);
user.setAddress(i + "地区");
result.add(user);
}
return result;
}
}
这样，每当我们进入页面后，前台都会通过ajax自动从后台获取数据并插入到table中
接下来看下后台如何接收前台传递的json数据
将之前的页面改造如下
<form id="test">
<table>
<tr>
<th>Id</th>
<td><input type="text" name="id"></td>
</tr>
<tr>
<th>username</th>
<td><input type="text" name="username"></td>
</tr>
<tr>
<th>password</th>
<td><input type="text" name="password"></td>
</tr>
<tr>
<th>address</th>
<td><select name="address">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select></td>
</tr>
</table>
</form>
<button id="btn1">添加</button>
<table id="tab">
<tr>
<th>Id</th>
<th>username</th>
<th>password</th>
<th>address</th>
</tr>
</table>
添加一个表单用于输入user数据，然后点击添加按钮，user数据会被封装成json字符串传递给后台，后台获取json字符串后将字符串解析成user对象然后再转换成json字符串返回给前台！听起来是不是很麻烦？其实springMVC都基本帮我们实现好了。
看一下js
//当用户点击id为btn1的按钮时，通过serializeArray()方法获取到表单中的数据，然后通过$.each将
//这些数据封装成json对象，最后使用JSON.stringify()方法将json对象转换成json字符串并发送给后台
$('#btn1').click(
function() {
var str = $('#test').serializeArray();
var sendData = {};
$.each(str, function() {
if (this.value == null) {
sendData[this.name] = '';
} else {
sendData[this.name] = this.value;
} });
$.ajaxSetup({
contentType : 'application/json'
});
//同上
$.post("user/add", JSON.stringify(sendData),
function(data, statusText) {
var temp = "<tr>";
temp += "<td>" + data.id + "</td><td>"
+ data.username + "</td><td>"
+ data.password + "</td><td>"
+ data.address + "</td>";
$('#tab').append(temp + "</tr>"); }, "json");
});
再看一下后台的代码
@RequestMapping(value = "/add", method = RequestMethod.POST)
@ResponseBody
public String getJsonMsg(@RequestBody User user)
{
System.out.println(user.getId() + "|" + user.getUsername() + "|"
+ user.getPassword() + "|" + user.getAddress());
return new Gson().toJson(user);
}
是不是很简单？因为springMVC可以帮我们自动将json字符串封装成User对象，只需要一个@RequestBody注解。再提醒一下，由于这里的自动转换会调用jackson的jar包，所以记得事先导入jackson的jar包（我就是之前一直忘记导入jar包然后搞了一下午的。。。）。
最后附上代码：访问地址为：localhost:8080/JsonDemo/
默认有两个链接
以上。