后台代码:
public Result add(@RequestBody Node node){}
前台 form 表单:
<form id="form" action="/admin/node/add" method="post" enctype="multipart/form-data">
<div class="form-group">
<label>名称</label>
<input type="text" name="nodeTitle" id="nodeTitle" class="form-control node-name">
</div>
<div class="form-group">
<label for="">描述</label>
<textarea name="nodeDesc" rows="7" class="form-control node-desc"></textarea>
</div>
<button type="submit" id="btn" class="btnbtn-primary">提交</button>
</form>
表单的 name 要和后台对象的字段一致,否则 Spring 映射的时候会报错。
AJAX 代码:
$("#form").submit(function(){
// 添加一个询问框,点击 "确定" 才走后面的代码
if(confirm("确定要添加此节点吗?")){
var nodeTitle = $("#nodeTitle").val();
if(!nodeTitle){
toast('节点名称不能为空');
return false;
}
// 定义一个 json 对象
var formObject = {};
/**
* 描述:form 表单序列化成 JSON 对象数组
* 作用:把表单里面的每个输入框都转换成一个 json 对象,然后把这些 json 对象放到一个数组里面
* 格式:
* [
* {"name":"nodeTitle","value":"java"},
* {"name":"nodeDes","value":"java语言"}
* ]
* @type {*|jQuery}
*/
var formArray =$("#form").serializeArray();
/**
* 描述:把 json 数组转化成 json 对象
* 作用:把 formArray 里面的每个 json 对象的 name 作为 formObject 的键,value 作为值。
* 格式:
* {
* nodeTitle: "java",
* nodeDes: "java语言"
* }
*/
$.each(formArray,function(i,item){
formObject[item.name] = item.value;
});
/**
* 作用:把 json 对象转化成 json 字符串
* 格式:
* {
* "nodeTitle": "java",
* "nodeDes": "java语言"
* }
*/
var formJson = JSON.stringify(formObject);
$.ajax({
url: "/admin/node/add",
contentType:"application/json; charset=utf-8",
type: "post",
dataType: "json",
data:formJson,
success: function(data){
if(data.success == true){
toast('添加成功','success');
setTimeout(function(){
window.location.href = "/admin/node/list";
},1000);
}else{
toast(data.error,'error');
}
},
error: function(data){
}
});
}
// ajax 代码块后面要加入 "return false;",否则表单会提交到后台,ajax 不生效。
return false;
});