后台代码:

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;
  
});

原文链接:https://miansen.wang/2019/06/23/3/