springMVC与jquery和ajax结合

来源：互联网发布：亚马逊和淘宝哪个大编辑：程序博客网时间：2024/04/27 03:27

在 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 "";    }

0 0