如何一起使用 formData 和 closest 函数？

Question

我正在使用两个 jquery/ajax 函数来提交数据，对于其中包含单个表单和文件上传的页面，我正在使用 var formData = new FormData(this);。

但是我在某些页面中有多个表单，所以我必须将功能更改为var form = $(this).closest('form');。

我的问题是：如何在同一函数中使用 closest(); 函数和 formData？ 然后我可以对所有页面使用相同的功能，而不是使用多个功能。

这是我的函数，可以用于多种形式，但不能用于 post 文件。

$(document).ready(function() {
   $('.submit').on("click", function(e) {
    e.preventDefault();
      var form = $(this).closest('form');
    $.ajax({
      type:'POST',
      url:'../page',
      data:form.serialize(),
      success:function(vardata){

        var json = JSON.parse(vardata);

        if(json.status == 101){
         alert(json.msg);
         window.location.replace("/my-account/");
        } else {
          alert(json.msg);
          console.log(json.msg);
        }
      }
    });
  });
});

并与正在发送文件但不能与同一页面中的多个表单一起使用的 formData 一起使用。

  $("#ProForm").submit(function(e){
    e.preventDefault();    
    var formData = new FormData(this);
    $.ajax({
    url:'page.php',
    type: 'POST',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
      success: function(data) {
        var json = JSON.parse(data);
        if(json.status == 101){
          alert(json.msg);
          window.location.replace("/my-account/");
        } else {
          alert(json.msg);
          console.log(json.msg);
        }
      }
    });
  });

我试过了但是没用 FormData(this).closest(); 和 append();

Answer 1

一个 jQuery 对象是一个 array-like 对象，其中 DOM 个节点是值。因此，如果您有一个 jQuery 对象和 single-use $node[0].

所以我认为你想要：

var form = $(this).closest('form');
var formData = new FormData(form[0]);

你也可以使用数组解构：

var [form] = $(this).closest('form');
var formData = new FormData(form);