Spring3 MVC 使用JSON进行前后台数据交互

在 Spring3 中，响应、接受 JSON都十分方便。
向前台返回 JSON 格式的数据：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

@RequestMapping(value = "/list", method = RequestMethod.GET) @ResponseBody public 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中配置：

1 2 3 4 5 6 7 8 9

<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中接受参数也非常简单：

1 2 3 4 5 6 7 8 9 10 11

@RequestMapping(value="/{id}",method=RequestMethod.GET) @ResponseBody public 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 的用户数据。

另外，在前台表单中向后台提交数据也非常方便：

1 2 3 4 5 6 7 8 9 10

@RequestMapping(value="/add",method=RequestMethod.POST) @ResponseBody public 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对象：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

$.fn.serializeObject = function(){     var o = {};     var a = this.serializeArray();     $.each(a, function(){         if (o[this.name]) {             if (!o[this.name].push) {                 o[this.name] = [o[this.name]];             }             o[this.name].push(this.value || '');         }         else {             o[this.name] = this.value || '';         }     });     return o; };

以下是使用 jQuery 接收、发送 JSON 的代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

/**  * @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(){         var jsonuserinfo = $.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")             }         });     }); });

代码下载：http://www.box.net/shared/ia6qht3hfu