springMvc如何和前端页面交互，传输json数据

springMvc和前端传输数据

这段时间做项目用到springMvc和easyui结合，写了一些前后端数据交互的模块，都是用json来传输的，有一段时间是在网上找学习资料的，写了一段时间后，略有所悟，就把自己收获到的知识跟大家分享一下。

springMvc和前端用json传输的方式我所知道的有种：

例如，以下有一段前端代码，用作表单数据提交的：

<span style="white-space:pre"></span><form action="" id="fm"><input name="name" value=""/><input name="password" value="" /><input type="button" value="提交" /></form>

然后，Ajax提交的时候使用easyui的form表单提交，即：

<span style="white-space:pre"></span>$("#fm").form('submit', {url:getRootpath()+"/user/addUser",onSubmit : function() {return $(this).form('validate');},success : function(result) {result=eval("("+result+")");if (result) {$.messager.show({title : '返回结果',msg : "更新成功！"});} else {$.messager.show({title : '返回结果',msg : "更新失败！"});}}

1.直接用map接收：

<span style="white-space:pre"></span>@RequestMapping("/addUser")@ResponseBodypublic String saveUser(@RequestParam Map user){try {<span style="white-space:pre"></span>//String id=(String) staffInfo.get("id");this.userService.save(user);} catch (Exception e) {return null;}return "更新成功！";}

这样子在方法的参数里面用一个map来接收，可以把前端所有数据以【key（name），value（value）】的方式封装进去，然后在后台取出来的时候，直接调用Map的get()方法就可以把值取出来，例如：map.get("name");不过这种方法比较麻烦，取出来之后又要转类型，而且取值的过程中又需要遍历一次map，不大建议使用，虽然可以说接收任何参数。

2.用entity来接收，即一个user类：

<span style="white-space:pre"></span>@RequestMapping("/addUser")@ResponseBodypublic String saveUser(User user){try {//String id=(String) staffInfo.get("id");this.userService.save(user);} catch (Exception e) {return null;}return "更新成功！";}

这种方法适合于前端页面的属性和entity的属性一致的情况下才可以进行，否则会报错

User类如下：

public class User {private String name;private String password;public String getName() {return name;}public void setName(String name) {this.name = name;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}}

3.如果前端的数据跟后台的entitiy的属性类型和数目不同的话，需要在前端自己封装json数据，然后以Ajax的方式传到后台，这里需要注意的是，在传输到后台的时候，前 端的json数据要是json字符串才行，这样子springMvc才能接收呢，后台执行方法的接收参数里面可以用一个自己写的vo来 接收，即value object，而且在接收参数的前面需要写一个@RequestBody注解：

<span style="white-space:pre"></span>@RequestMapping("/addUser")@ResponseBodypublic String saveUser(@RequestBody UserVO user){try {//String id=(String) staffInfo.get("id");this.userService.save(user);} catch (Exception e) {return null;}return "更新成功！";}

第三种方法个人觉得比较灵活，如果你在前端的json数据有嵌套到集合的，就可以用这种方法，自己写一个vo对象，里面再写一个集合，不过需要注意的是，属性的名字必须与前端页面传过来的属性名字一致才行，而且vo的属性集合只能多于前端传过来的属性集合，不能少于，否则会报400的错误。

以上是我学习到的体会，如果有哪里不对的地方，还请各位指出来。