【jQuery】jQuery的serializeArray封装表单数据为JSON并提交到SpringMVC服务器

表单

---

设置表单的id，点击提交按钮后，将表单id和URL作为参数调用sendJSON()函数

<form id="adressForm">
    <table>
        <tr>
            <td>userId：</td>
            <td><input type="text" name="userId"></td>
        </tr>
        <tr>
            <td>是否默认地址：</td>
            <td><input type="text" name="isDefault"></td>
        </tr>
        <tr>
            <td>联系人：</td>
            <td><input type="text" name="contacts"></td>
        </tr>
        <tr>
            <td>手机：</td>
            <td><input type="text" name="phone"></td>
        </tr>
        <tr>
            <td>省：</td>
            <td><input type="text" name="province"></td>
        </tr>
        <tr>
            <td>市：</td>
            <td><input type="text" name="city"></td>
        </tr>
        <tr>
            <td>区：</td>
            <td><input type="text" name="district"></td>
        </tr>
        <tr>
            <td>街道：</td>
            <td><input type="text" name="road"></td>
        </tr>
        <tr>
            <td>详细地址：</td>
            <td><input type="text" name="detailed"></td>
        </tr>
        <tr>
            <td>
                <button type="button" onclick="sendJSON('adressForm','<%=basePath%>/user/addAdress)">添加地址</button>
            </td>
        </tr>
    </table>
</form>

脚本

---

这里将表单id和URL作为参数，主要是为了可以将sendJSON()函数放在JS脚本文件中，作为一个通用函数在多个地方进行调用

function sendJSON(formName, urlName) {
    //获取表单数据，并序列化
    var formData = $("#" + formName).serializeArray();

    //将序列化数据转为对象
    var formObject = {};
    for (var item in formData) {
        formObject[formData[item].name] = formData[item].value;
    }
    var formJSON = JSON.stringify(formObject);

    //发送JSON到服务器
    $.ajax({
        type: "POST",
        url: urlName,
        contentType: "application/json",  //一定要设置这一行，很关键
        data: formJSON,
        datatype: "json",
        success: function (data) {
            alert(JSON.stringify(data));
        }
    });
}

SpringMVC

---

配置JSON转换器

如果使用SpringMVC的默认JSON转换器，这一项可以不用配置，SpringMVC会自己使用包路径下的MappingJackson2HttpMessageConverter或者MappingJacksonHttpMessageConverter，取决于包路径下面存在哪一个

<!--JSON转换器，不配置会默认使用包路径下面的Jack JSON-->
    <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
        <property name="messageConverters">
            <list>
                <ref bean="mappingJacksonHttpMessageConverter"/>
            </list>
        </property>
    </bean>
    <bean id="mappingJacksonHttpMessageConverter"
          class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
        <property name="supportedMediaTypes">
            <list>
                <value>application/json;charset=UTF-8</value>
            </list>
        </property>
    </bean>

controller

如果使用@Controller注解，那么需要在方法上加入@RequestBody注解

如果使用@RestController注解，则不需要加上@RequestBody注解

/**
     * 添加地址
     *
     * @param adress
     * @return
     */
    @RequestMapping(value = "/addAdress", method = RequestMethod.POST, consumes = "application/json")
    @ResponseBody 
    public Adress addAdress(@RequestBody Adress adress) {
        appService.addAdress(adress);
        return adress;
    }