spring MVC通过json与前台交互

这里用的是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/

默认有两个链接

以上。