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()的FormData对象的键/值来迭代jQuery返回的数据对象

$('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>

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

1 个答案: