如何通过 AJAX 使用 formdata 发送更多数据

Question

我想通过 jquery ajax 向 PHP 发送多个表单数据。 如果我想在每个输入中使用 data-value-1="value1" 和 data-value-2="value2" 向 PHP 发送更多值该怎么办？

HTML

<form action="url.php">
<div><input type="text" class="title-input" name="titleInput" placeholder="title"></div>
<div><input id="file_input" name="files[]" class="img" type="file"/></div>
<input name="submit" type="submit" value="upload"/>
</form>

JavaScript

$(function){
  var form_data = new FormData(this); //Creates new FormData object
        var post_url = $(this).attr("action"); //get action URL of form

        //jQuery Ajax to Post form data
        $.ajax({
          url : post_url,
          type: "POST",
          data : form_data,
          contentType: false,
          cache: false,
          processData:false,
          xhr: function(){
            //upload Progress
           }

});

一切都很好，直到我需要这个将更多带有 data-val 的值发送到输入标签中。

<div>
  <input type="text" 
         class="title-input" 
         name="titleInput" 
         placeholder="title" 
         data-value-one="val1" 
         data-value-two="val2">
</div>

如何使用表单数据发送这些值？

Answer 1

循环遍历具有数据属性的元素，然后使用 data() 和 append() 将键/值迭代到 jQuery 返回的数据对象到 FormData 对象

$('form').submit(function(evt) {
  evt.preventDefault()
  var form_data = new FormData(this);

  $(this).find(':input').filter(function() {
    return $(this).data()
  }).each(function() {
    $.each($(this).data(), function(k, v) {
      form_data.append(k, v)
    });
  });
  
  console.log(Array.from(form_data.entries()))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="url.php">
  <div>
  <input 
      name="titleInput" 
      value="title test"
      data-value-one="val1" 
      data-value-two="val2"
  >
  </div>
 
 
 <div><input id="file_input" name="files[]" class="img" type="file" /></div>
  <input name="submit" type="submit" value="upload" />
</form>