Question

我有一个带有一些自定义值的表单，我想拦截它的提交并自己构建传递给后端的数据。

我已经搜索过，我可以通过以下方式拦截提交：

$("#search-form").submit(function(e){
    e.preventDefault();
    var form = this;
    form.submit();
});

在手动提交之前，我想构建传递给后端的数据。例如，我想构建以下数据：

{
  search: {
    someField1: "someValue1",
    someField2: "someValue2",
    someFields: [
      {
        nestedField1: "value1",
      },
      {
        nestedField2: "value2"
      }
    ]
  }
}

要明确的是，我要完全删除表单中的原始数据，我并不关心其中的内容。

Answer 1

您可以截取表单提交，取消它，只需使用ajax调用即可发送您喜欢的内容。

var data = {
  search: {
    someField1: "someValue1",
    someField2: "someValue2",
    someFields: [{
        nestedField1: "value1",
      },
      {
        nestedField2: "value2"
      }
    ]
  }
};
$('#test').submit(function(e) {
  e.preventDefault();
  e.stopPropagation();
  $.post(this.action, data);
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="test" action="http://google.com" method="POST">
  <input type="text" />
  <input type="submit" />
</form>

jQuery：拦截表单提交和构建数据

1 个答案: