在 Spring mvc3中,响应、接受 JSON都十分方便。
使用注解@ResponseBody可以将结果(一个包含字符串和JavaBean的Map),转换成JSON。
使用 @RequestBody 注解前台只需要向 Controller 提交一段符合格式的 JSON,Spring 会自动将其拼装成 bean。
Spring这个转换是靠org.codehaus.jackson这个组件来实现的,所有需要引入jackson-core-asl和org.codehaus.jackson两个jar包
<title>Spring MVC</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/scripts/user/index.js"></script> </head> <body> <div id="info"></div> <form action="add" method="post" id="form"> 编号:<input type="text" name="id"/> 姓名:<input type="text" name="username"/> 年龄:<input type="text" name="age"/> <input type="button" value="提交" id="submit"/> </form> </body> </html>
//将一个表单的数据返回成JSON对象 $.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; }; $(document).ready( function() { jQuery.ajax( { type : 'GET', contentType : 'application/json', url : 'user/list', 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 : 'user/add', data : jsonuserinfo, dataType : 'json', success : function(data) { alert("新增成功!"); }, error : function(data) { alert("error") } }); }); });
@Controller @RequestMapping("/user") public class DemoController { private Logger logger = LoggerFactory.getLogger(DemoController.class); @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; } @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; } }
另外一种参数传递方式
前端代码:
$.ajax({type : "POST", url : "assign.v", data : { userId : userId, 'add[]' : [1,2,3], 'del[]' :[4] }, success : function (data){ searchWidget.searchUser(1); } });
后端代码:
@ResponseBody @RequestMapping(value="/assign", method=RequestMethod.POST) public String assign( @RequestParam(value="userId", required=true) int userId, @RequestParam(value="add[]", required=false) int[] add, @RequestParam(value="del[]", required=false) int[] del) { System.out.println("userId:" + userId); System.out.println("add:" + add); System.out.println("del:" + del); return ""; }