Ajax与SpringMVC交互详解

Ajax的使用是很经常的，最近在写自己的博客系统的时候也用到了，在这总结一下用法，有完整例子

本文章统一用index.jsp页面

    <div id="info"></div>    <form action="add" method="post" id="form">         姓名：<input type="text" name="username" />          年龄：<input type="text" name="age" />          <input type="button" value="提交" id="submit" />    </form>

---

form表单参数转换

主要是json交互需要使用

• 序列化成拼接字符串（用serialize()）

$('#form').serialize() //

结果：

• 转换成json对象
  先将form表单参数转换成对象

    //将一个表单的数据返回成对象      $.fn.serializeObject = function() {        var arrayData, objectData;        arrayData = this.serializeArray();        objectData = {};$.each(arrayData, function() {    var value;    if (this.value != null && this.value != '') {        value = this.value;    } else {        value = null;    }    if (objectData[this.name] != null) {        if (!objectData[this.name].push) {            objectData[this.name] = [ objectData[this.name] ];        }        objectData[this.name].push(value);    } else {        objectData[this.name] = value;    }});return objectData;}

再用JSON.stringify()方法转化为json对象即可

var Object = $('#form').serializeObject();            var json = JSON.stringify(Object);

注意：
* stringify()用于从一个对象解析出字符串

var str = {a:1,b:2};JSON.stringify(str);结果："{"a":1,"b":2}"

parse()用于从一个字符串中解析出json对象

var str = '{"name":"hope","age":"20"}';JSON.parse(str);结果：Objectage: "23"name: "hope"__proto__: Object

---

SpringMVC与ajax

• 环境：tomcat7.0, eclipse, jdk1.8
  Spring4.3.4, jackson2.8.7
• 添加SpringMVC支持json的jar包下载地址，或者去Maven仓库下载
  如图：
  
  注意： 如果运行出现java.lang.NoSuchMethodError: com.fasterxml异常，说明Spring版本与json版本不兼容，解决方案：提高json版本。

---

• 新建index.jsp（在文章开头）

• 新建模型UserModel

package com.entity;public class UserModel {    private String username;    private int age;    public String getUsername() {        return username;    }    public void setUsername(String username) {        this.username = username;    }    public int getAge() {        return age;    }    public void setAge(int age) {        this.age = age;    }}

• 新建UserController

package com.controller;import java.util.*;import java.util.HashMap;import java.util.Map;import org.hibernate.annotations.common.util.impl.LoggerFactory;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.ResponseBody;import com.entity.UserModel;@Controller  @RequestMapping("/user")  public class UserController {    private org.jboss.logging.Logger logger = LoggerFactory.logger(UserController.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.setUsername("hope");      um.setAge(20);      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("新增model");      logger.info("捕获到前台Model：" + model.getUsername());      Map<String, String> map = new HashMap<String, String>(1);      map.put("success", "true");      return map;    }  }  

• 编写Ajax

    <script>    //将一个表单的数据返回成对象      $.fn.serializeObject = function() {        var arrayData, objectData;arrayData = this.serializeArray();objectData = {};$.each(arrayData, function() {    var value;    if (this.value != null && this.value != '') {        value = this.value;    } else {        value = null;    }    if (objectData[this.name] != null) {        if (!objectData[this.name].push) {            objectData[this.name] = [ objectData[this.name] ];        }        objectData[this.name].push(value);    } else {        objectData[this.name] = value;    }});return objectData;}    $(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.username                          + "，年龄：" + item.age);                  });                }              },              error : function() {                alert("error")              }            });            $("#submit").click(function() {               var Object = $('#form').serializeObject();             var json = JSON.stringify(Object);             jQuery.ajax( {                type : 'POST',                contentType : 'application/json',                url : 'user/add',                data : json,                dataType : 'json',                success : function(data) {                  alert("新增成功！");                },                error : function(data) {                  alert("error")                }              });             });          });      </script>

• 演示结果：
  
  控制台
  

• 完整项目源码下载