使用springmvc实现网页前端与后台的数据交互_综合

使用ajax请求后台数据的格式以及后台作出响应的方式

请求方法一：必须声明请求方法为POST，设置数据传输的格式

$('#btnSave').click(function(){var json = {text:$('#name').val(),desc:$('#desc').val()};//发起ajax请求$.ajax({type:'POST',url:'<%= request.getContextPath()%>/role/role_add',contentType:'application/json',data:JSON.stringify(json),				 success:function(data){alert(data);}});});

对应的接收方式：

 @RequestMapping("/role_add")@ResponseBodypublic void addDept(@RequestBody Role role,HttpServletResponse resp){

请求方式二，使用form表单提交，提交的内容需要包裹在form表单中，序列化表单，就可以将数据传递到后台了

 $.ajax({type:'POST',url:'<%=request.getContextPath()%>/use/user_add',data:$('form').serialize(), success:function(data) {alert(data);}});
对应的接收方式：@RequestMapping("/user_add")public void addUser(String account,String name,String pwd,String email,String role,String dept,HttpServletResponse resp){

后台响应方式一：

 @RequestMapping("/role_add")@ResponseBody//这句很重要，这句注解是让mvc容器自动匹配

public void addDept(@RequestBody Role role,HttpServletResponse resp){resp.setContentType("text/html;charset=utf-8");PrintWriter out = null;String msg = "";try {out = resp.getWriter();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}if(role.getText()!=null&&!role.getText().equals("")){if(service.addRole(role)==0){msg = "添加失败";}else{msg = "添加成功";}}else{msg = "添加失败";}out.write(msg);out.close();}

后台响应方式二：

后台响应后返回json格式的数据的方法：

返回存储相应数据的集合即可，mvc容器会自动转换成对应的json格式的数据

 @RequestMapping("/findRoles")@ResponseBodypublic List<Role> findRoles(){//添加@ResponseBody才会交给converters处理

return service.getAllRoles();}

后台响应方式三：使用map返回将json数据输出到前台

    @ResponseBody
     @RequestMapping("/getEmployeeMap")
public Map<String, Object> getEmployeeMap() {
         List<Employee> employees = new ArrayList<Employee>();
         employees.add(new Employee(1, "张三", "1", 5600d, new Date()));
         employees.add(new Employee(2, "李四", "2", 4600d, new Date()));
         employees.add(new Employee(3, "王二麻", "1", 6600d, new Date()));
         Map<String, Object> map = new LinkedHashMap<String,Object>();
         map.put("total", employees.size());
         map.put("rows", employees);
return map;
    }