【转】Spring3 MVC 使用JSON进行前后台数据交互
?
转自http://blog.liuweifeng.net/archives/407
在 Spring3 中,响应、接受 JSON都十分方便。
向前台返回 JSON 格式的数据:
@RequestMapping(value = "/list", method = RequestMethod.GET)@ResponseBodypublic Map<String, Object> getUserList() {logger.info("列表");List<UserModel> list = new ArrayList<UserModel>();UserModel um = new UserModel();um.setId("1");um.setUsername("sss");um.setAge(222);list.add(um);Map<String, Object> modelMap = new???? HashMap<String, Object>(3);modelMap.put("total", "1");modelMap.put("data", list);modelMap.put("success", "true");return modelMap;}使用注解@ResponseBody可以将结果(一个包含字符串和JavaBean的Map),转换成JSON。
Spring这个转换是靠org.codehaus.jackson这个组件来实现的,所有需要引入jackson-core-asl和org.codehaus.jackson两个jar包,并且在web.xml中配置:
<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"><property name="messageConverters"><util:list id="beanList"><ref bean="mappingJacksonHttpMessageConverter" /></util:list></property></bean>?<bean id="mappingJacksonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter" />
在Controller中接受参数也非常简单:
@RequestMapping(value="/{id}",method=RequestMethod.GET)@ResponseBodypublic UserModel getUserById(@PathVariable String id){logger.info("取值");UserModel um = new UserModel();um.setId(id);um.setUsername("sss");um.setAge(222);return um;}这样,可以访问类似于 http://localhost:8080/demo/user/1.do 来获取 id 为 1 的用户数据。
另外,在前台表单中向后台提交数据也非常方便:
12345678910@RequestMapping(value="/add",method=RequestMethod.POST)@ResponseBodypublic Map<String, String> addUser(@RequestBody UserModel model){logger.info("新增");logger.info("捕获到前台传递过来的Model,名称为:"+model.getUsername());Map<String, String> map = new HashMap<String, String>(1);map.put("success", "true");return map;}使用 @RequestBody 注解前台只需要向 Controller 提交一段符合格式的 JSON,Spring 会自动将其拼装成 bean。
这样,Controller可以返回给前台JSON,也可以接收JSON。
而在前台,我们可以用 jQuery 来处理 JSON。
从这里,我得到了一个 jQuery 的插件,可以将一个表单的数据返回成JSON对象:
1234567891011121314151617181920212223242526272829303132333435363738394041/*** @author liuweifeng*/$(document).ready(function(){jQuery.ajax({type:'GET',contentType:'application/json',url:'list.do',dataType:'json',success:function(data){if(data && data.success =="true") {$('#info').html("共"+ data.total +"条数据。<br/>");$.each(data.data,function(i, item){$('#info').append("编号:"+ item.id +",姓名:"+ item.username +",年龄:"+item.age);});}},error:function(){alert("error")}});$("#submit").click(function(){varjsonuserinfo = $.toJSON($('#form').serializeObject());alert(jsonuserinfo);jQuery.ajax({type:'POST',contentType:'application/json',url:'add.do',data: jsonuserinfo,dataType:'json',success:function(data){alert("新增成功!");},error:function(){alert("error")}});});});