`
愤怒的砖头
  • 浏览: 9773 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

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")
	@ResponseBody
	public 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")
	@ResponseBody
	public 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")
	@ResponseBody
	public 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的错误。

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




分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics