从 Javascript ajax formData 中排除空属性

Question

我有发送表单数据的表单

没有选择选项时出现空白fields[]。

有什么方法可以排除空的 fields[] 通过 Javascript 中的 formData 发送？

发送Header输出

fields[name]: name
fields[phone]: phone
fields[]: 
fields[]:

$('body').on('submit', '#submit', function(e) {
  e.preventDefault();
  var formData = new FormData(this);
  // logs what's the actual properties sent
  for (var prop of formData) console.log(prop);
    $.ajax({
    url: $(this).attr('action'),
    data: formData,
    type: 'POST',
    contentType: false,
    cache: false,
    processData: false,
  }).done(function(data) {
    //success
  }).fail(function() {
    //eror
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="submit">
  <select name="fields[name]">
    <option value=""></option>
    <option value="name">Name</option>
    <option value="phone">Phone</option>
  </select>

  <select name="fields[phone]">
    <option value=""></option>
    <option value="name">Name</option>
    <option value="phone">Phone</option>
  </select>
  <select name="fields[email]">
    <option value="name">Name</option>
    <option value="phone">Phone</option>
  </select>
  <input type="submit"/>
</form>

Answer 1

我们猜测您想要清除所有具有空值的表单属性。这是一种方法，它可能更优化，但更容易理解。

$('body').on('submit', '#submit', function(e) {
  e.preventDefault();
  var formData = new FormData(this);
  var formDataNonEmpty = new FormData();
  // add all non empy entries to formDataNonEmpty
  for (var prop of formData) if (prop[1]) formDataNonEmpty.append(prop[0], prop[1]);
  // logs what's the actual properties sent
  for (var prop of formDataNonEmpty) console.log(prop);
    $.ajax({
    url: $(this).attr('action'),
    data: formDataNonEmpty,
    type: 'POST',
    contentType: false,
    cache: false,
    processData: false,
  }).done(function(data) {
    //success
  }).fail(function() {
    //eror
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form id="submit">
  <select name="fields[name]">
    <option value=""></option>
    <option value="name">Name</option>
    <option value="phone">Phone</option>
  </select>

  <select name="fields[phone]">
    <option value=""></option>
    <option value="name">Name</option>
    <option value="phone">Phone</option>
  </select>
  <select name="fields[email]">
    <option value="name">Name</option>
    <option value="phone">Phone</option>
  </select>
  <input type="submit"/>
</form>

从 Javascript ajax formData 中排除空属性

Exlude empty properties from Javascript ajax formData

javascript

ajax

jquery

form-data