/**
* 将Json数组转为Json字符串,即将$("#form-test").serializeArray()的内容转为json字符串
* @param formArray即 $("#form-test").serializeArray(),为json数组
* @returns {string} json字符串
*/
function formToJson(formArray){
var formObject = {};
formArray.forEach(function (item) {
formObject[item.name] = item.value;
});
return JSON.stringify(formObject);
}
serialize()和serializeArray()的区别:
serialize(): 将表单数据序列化为字符串,使用&连接,即key=value&key2=value2
如:id=1&name=zhangsan&money=123
serializeArray():将表单数据序列化为对象数组。如:
(3) [{…}, {…}, {…}]
0: {name: “id”, value: “1”}
1: {name: “name”, value: “zhangsan”}
2: {name: “money”, value: “123”}
例子:
<form id="form-test">
id:<input type="text" name="id" placeholder="请输入id"><br>
账户名:<input type="text" name="name" placeholder="请输入用户名"><br>
金 额:<input type="password" name="money" placeholder="请输入密码"><br>
<input type="button" value="提交" id="sub"><br>
</form>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/util.js"></script>
<script>
$(function () {
//不能序列化文件,而使用FormData可以
$("#sub").click(function () {
$.post({
url:'ajax/testAjax',
contentType:'application/json;charset=UTF-8',
data:formToJson($("#form-test").serializeArray()),
dataType:'json',
type:'post',
success:function (data) {
console.log(data);
}
});
});
});
</script>
@Controller
@RequestMapping("/ajax")
public class AjaxController {
/**
* 接受前端的json字符串,由springMVC帮我们转为对象
* 并响应json串给前端
* @param account
* @return
*/
@RequestMapping(value = "/testAjax",method = RequestMethod.POST)
public @ResponseBody Account ajax(@RequestBody Account account){
System.out.println(account);
account.setName("李四");
account.setMoney(2000);
//返回对象,springMvc将javaBean转为json串,传递给前端
return account;
}
}