使用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>