使用serialize()提交form表单数据后台为null问题解决

使用serialize()提交form表单数据后台为null问题解决

今天在完成新增账户功能时，利用jQuery的serialize方法，希望将整张表的数据传至后台，收到的数据却全部为null：

<form class="form-horizontal" id="account_add_form">
    <div class="form-group">
        <label for="accountName_add_input" class="col-sm-2 control-label">Name</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="accountName_add_input"  placeholder="accountName">
        </div>
    </div>
    <div class="form-group">
        <label for="accountMoney_add_input" class="col-sm-2 control-label">Money</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="accountMoney_add_input"  placeholder="accountMoney">
        </div>
    </div>
</form>

$("#account_save_btn").click(function(){
        var form = $("#account_add_form").serialize()
        console.log(form);
        alert(form);
        //1.模态框种填写的表单数据提交给服务器进行保存
        //2.发送ajax请求保存员工
        $.ajax({
            url:"/account/save",
            type:"POST",
            data:form
        });
    });

问题分析:

1.console.log可以将结果打印至控制台,但是alert没有反应，且后台接收数据为null

上网查找资料,发现是表单的input中没有加入name属性,只有id属性

2.​ 于是乎，添加name属性,但是属性值与后台Account类的属性名不一致.

​ 此时:alert有反应,但后台得到的数据为null,即没有成功封装

3.将name属性值与Account类的属性名保持一致,

​ 封装成功,问题解决!

成功代码:

<form class="form-horizontal" id="account_add_form">
    <div class="form-group">
        <label for="accountName_add_input" class="col-sm-2 control-label">Name</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="accountName_add_input" name="name" placeholder="accountName">
        </div>
    </div>
    <div class="form-group">
        <label for="accountMoney_add_input" class="col-sm-2 control-label">Money</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="accountMoney_add_input" name="money" placeholder="accountMoney">
        </div>
    </div>
</form>