javascript - 如何在 jquery 或 javascript 中创建表单数据对象？

Question

我想使用 AJAX 提交两个不同的表单，但我无法确定如何选择这些表单来制作表单数据对象(它也有文件))。我已经尝试过一种形式:

<form class="ui form" id="contact-form" enctype="multipart/form-data" onsubmit='return !!(filecheck() && show());'>
  <div class="field">
    <label>Title of the Ad</label>
    <input name="title" type="text" id="title">
  </div>
  <div class="field">
    <label>Select Car Make</label>
</form>

$("#contact-form").submit(function(e){
e.preventDefault();
var form = $('form')[0];
var formData = new FormData(form);
  $.ajax({
    url: 'infocheck.php',
    async: true,
    cache: false,
    data: formData,
    contentType: false, 
    processData: false, // 
    type:'post',
    success: function(response) {    
      document.getElementById("loader").style.display = "none";
      alert(response);
    }
  });
});

现在我有另一种形式

<form class="ui form" id="second-form" enctype="multipart/form-data" onsubmit='return !!(filecheck() && show());'>
  <div class="field">
    <label>Title of the Ad</label>
    <input name="title" type="text" id="title">
  </div>
  <div class="field">
    <label>Select Car Make</label>
</form>

如何发送此表单的请求......有什么想法吗？

Answer 1

您可以通过使用两种表单上的公共(public)类来选择它们来实现此目的。然后，您可以在 submit 事件处理程序中使用 this 关键字来仅引用触发该事件的表单:

$('.ui.form').submit(function(e) {
  e.preventDefault();
  var formData = new FormData(this); // note use of 'this' here

  $.ajax({
    url: 'infocheck.php',
    cache: false,
    data: formData,
    contentType: false, 
    processData: false,
    type: 'post',
    success: function(response) {    
      document.getElementById("loader").style.display = "none";
      alert(response);
    }
  });
});