这两天把SpringMVC与前台JSON数据交互大概的了解了下，现在做下总结，以方便后期复习

SpringMVC与前台交互，我大概理了一下，分为以下几种：

1：前台直接发送表单，后台接收

2：前台直接发送拼接好的json数据，后台接收

3：前台直接将表单转json，后台接收，并返回给前台

现在我们来一一说明

第一，前台直接发送表单，这个最简单

如下面这个表单

<form id="formid" action="getjson/getjson.do" method="post">
	姓名：<input id="username" name="username" type="text" /><br />
	密码：<input id="password" name="password" type="password" />
	<br />
	<input type="submit" value="提交表单" />
	<input type="reset" value="重置" />
</form>

后台接收参数（之前已有说明，此处不再详述接收参数的方法），如下代码片段

// 直接表单发送
@RequestMapping(value = "/getjson")
public ModelAndView getuser(@RequestParam(value = "username") String username,
		@RequestParam(value = "password") String password) {
省略其他，只看方法参数

我们这里的方法参数使用了RequestParam标注，用这个注解标注，有唯一一个好处就是，如果为空会返回404

当然可以不用注解。

第二：前台直接发送拼接好的json数据，后台接收

请看如下代码片段：

js代码部分完整代码

<script type="text/javascript">
	function upjson1(){
		$.ajax({
			url:"getjson/getjson1.do",
			async:false,
			dataType:"text",
			type:"get",
			data:{"username":$("#username").val(),"password":$("#password").val()},
			contentType:"application/json",
			success:function(data){
				alert(data);
			},
			error:function(){
				alert("失败");
			}
		});
	}
}

表单部分：

<form id="formid">
	姓名：<input id="username" name="username" type="text" /><br />
	密码：<input id="password" name="password" type="password" />
	<br />
	<input type="button" onClick="upjson1();" value="提交json1" />
	<input type="reset" value="重置" />
</form>

后台接收的方式，除了第一种方式来接收，还可以有第二种方式来接收（用javabean来接收json字符串），如代码所示：

@RequestMapping(value = "/getjson1")
public ModelAndView getuser1(listuser users) {
	Map<String, String> map = new HashMap<String, String>();
	map.put("username", users.getUsername());
	map.put("pw", users.getPassword());
	return new ModelAndView("/getJSON", "result", map);
}

以下代码为完整的listuser类
public class listuser {
	private String username;
	private String password;
	
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	
	
}

只需要表单的name与javabean中的字段一致即可，返回到的前台视图页面是可以正常获取到数据的，您可以测试下

第三：前台直接将表单转json，后台接收，并返回给前台

第三比较麻烦，这里的应用场景是：一个表格表单，您需要将表单的每一行数据发送到后台进行处理，比如每一行表示一个产品信息，你需要发送到后台进行处理

此处本例，就直接将表单的每一行发送后台给listuser

首先看看我们前台的代码是这样的：

js部分完整代码：

<script type="text/javascript">
	function upjson2(){
		var formobj = $("#formid").serializeArray();
		var formjson = JSON.stringify(formobj);
		alert(formjson);
		$.ajax({
			url:"getjson/getjson2.do",
			async:false,
			dataType:"html",
			type:"POST",
			data:{"formjson":formjson},
			contentType:"application/x-www-form-urlencoded",
			success:function(data){
				alert(data);
				alert("成功");
			},
			error:function(){
				alert("失败");
			}
		});
	}
</script>

表单部分的代码：

<form id="formid" action="getjson/getjson.do" method="post">
	姓名：<input id="username" name="username" type="text" /><br />
	密码：<input id="password" name="password" type="password" />
	<br />
	<input type="button" onClick="upjson1();" value="提交json1" />
	<input type="reset" value="重置" />
</form>

这里我解释一下，上面的js代码表示将form表单转换为了json数组，再将json数组转换为了json字符串，然后将这个字符串发送到后台进行处理

必须转换为json字符串，再发送到服务器，而不是直接发送json对象，发送json对象，服务器是不认识的哦。

并且我们设置了 contentType:"application/x-www-form-urlencoded"

这里必须设置，在SpringMVC里，如果采用post方式提交数据的话，就必须加上这句，否则后台是接收不到参数的

后台返回给前台的是一个json字符串

这里需要注意的问题是：

1，这里自动转换为json数组并且转换为json字符串，你会发现，他的结构是[{"name":"username","value":"姓名"},{"name":"password","value":"密码"}]

并不是我们想要的[{username:username,password:password}]

这里可以有两种方法来解决，一种是前端js转换，一种是后台json转换。我这里是使用的后台转换：

后端代码如下：

@RequestMapping(value = "/getjson2")
public @ResponseBody String getuser2(@RequestParam String formjson) {		
	listuser user = new listuser();
	//将字符串转换为json数组
	JSONArray jsonarray = JSON.parseArray(formjson);
	String username = (String) ((Map<?, ?>) jsonarray.get(0)).get("value");
	String password = (String) ((Map<?, ?>) jsonarray.get(1)).get("value");
	user.setUsername(username);
	user.setPassword(password);
	System.out.println(user.getPassword());
	System.out.println(user.getUsername());
	
	//如果不需要反序列化
	//可以用@JSONField(serialize=false)标注字段即可
	//或直接用jdk的transient 标注字段
	String json = JSON.toJSONString(user,SerializerFeature.WriteMapNullValue);
	System.out.println(json);
	return json;
}

以上代码用的是阿里巴巴的fastjson来处理json数据的

我们将json字符串转换成了map，获得map的key 和 value 把相应的值给user

然后通过反序列化，将javabean转换成了json字符串

本例中打印的json的结果，格式如下：

{"password":"fdfdf","username":"奋斗奋斗"}

我们需要将这个字符串返回给前台使用

所以我们需要在方法上使用@ResponseBody来注解，或者直接在返回类型的前面添加都可以

这里我们就遇到了第二个问题

2，第二个问题就是json中文字符传递到前台乱码

如我们前台返回success，打印data，如果有中文，这里会出现乱码。

所以我们需要配置一下，通常我们是直接配置

<mvc:annotation-driven>

只需要指定supportedMediaTypes他的值是 text/html;charset=UTF-8

SpringMVC完整的解决json中文乱码的配置如下：

<mvc:annotation-driven>
        <mvc:message-converters>
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                 <property name="supportedMediaTypes">
                     <list>
                         <value>text/html;charset=UTF-8</value>
                     </list>
                 </property>
            </bean>
    </mvc:message-converters>
</mvc:annotation-driven>

当然还有一种方法就是在RequestMapping 里面添加produces属性，如下代码所示：

@RequestMapping(value = "/getjson2",produces = {"application/json;charset=UTF-8"})

相比较而言，还是直接配置xml要简洁方便得多吧。

fastjson-1.2.5.jar下载