form表单serialize()序列化，通过ajax发请求，后端值为空问题

起因

因为form表单提交后，必定会刷新页面，所以喜欢用ajax发送请求和数据。

但表单数据过多，如果拼接成json需要很长的代码，因此用serialize()序列化来获取值。

但是后端用实体类来接，都获取不到值。

$.ajax({
        url:"/d_postJob/saveD_PostJob",
        type:"post",
        data:$("#postJobForm").serialize(),
        // headers:{
        //     "token" : localStorage.token
        // },
        success:function(msg){
            if(msg.code=="200"){
                alert(msg)
            }else{
                layer.alert(msg.data,{
                    yes:function (index) {
                        layer.close(index);
                        // location.reload();
                    }
                })
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            layer.alert("状态码："+xhr.status+"，请求状态："+textStatus+"，状态:"+xhr.readyState+"，返回响应信息："+xhr.responseText);
        }
    })

解决

因为序列化绑定的是控件的name属性，只给控件赋予id属性，序列化将获取不到值。

因为使用jQuery较多，本能喜欢用id，不喜欢用name，所以导致问题。

<input type="text" id="contactsTel" placeholder="电话号码">

上面缺少了id属性，添加上name属性

<input type="text" id="contactsTel" name="contactsTel" placeholder="电话号码">

其他

找问题的时候，看了很多文章，发现serialize方法是将数据拼接成字符串，再传值

如果要传JSON格式的数据，需要使用serializeArray方法，他将数据序列化成特殊的json数组，再用代码转换成JSON格式，传值。

ajax如果使用serialize方法，后端也可以获取值。

参考文章：jQuery表单序列化方法serialize(),serializeArray()_无痕之意的博客-CSDN博客_表单序列化方法