Question

我在Ajax调用中遇到formData。我用相同的信息阅读了我所能做到的一切，尝试用这个获得表格，getElementById并且没有任何作用（甚至从SO尝试了几个解决方案）。

我有一个标识为add-lang-form的表单：

<form class="js-validation-addlang" method="post" enctype="multipart/form-data" id="add-lang-form" name="add-lang-form">
  <div class="form-group row">
    <label class="col-6 col-form-label">Language Name</label>
    <label class="col-6 col-form-label">Language Code</label>
    <div class="col-md-6">
      <div class="input-group">
        <input type="text" class="form-control" id="lang_name" name="lang_name">
        <span class="input-group-addon"><i class="fa fa-file"></i></span>
      </div>
    </div>
    <div class="col-md-6">
      <div class="input-group">
        <input type="text" class="form-control" id="lang_code" name="lang_code">
        <span class="input-group-addon"><img src="/assets/img/flags/def.png" id="flag-icon"/></i></span>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-12" for="lang_tags">Language Tags</label>
    <div class="col-lg-12">
      <div class="input-group">
        <input type="text" class="form-control" id="lang_tags" name="lang_tags">
        <span class="input-group-addon"><i class="fa fa-list"></i></span>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-md-12">Image</label>
    <div class="col-md-12">
      <input type="file" id="lang_img" name="lang_img" class="dropify" />
    </div>
  </div>
  <div class="form-group row">
    <div class="col-md-12">
      <button type="submit" class="btn btn-alt-primary pull-right">Submit</button>
    </div>
  </div>
</form>

我有一个用submitHandler进行表单验证后调用的函数：

function AddLang(e) {
  e.preventDefault ? e.preventDefault() : e.returnValue = false;
  var form = document.getElementById('add-lang-form');
  var formData = new FormData(form);
  $.ajax({
    url: 'PHP_FILE',
    enctype: 'multipart/form-data',
    processData: false,
    contentType: false,
    cache: false,
    data: {
      dados: formdata,
      caller: 'addlang',
    },
    type: 'POST',
    beforeSend: function() {
      $("#login_btn").html('<i class="fa fa-2x fa-cog fa-spin"></i>');
      $("#login_btn").attr("disabled", true);
    },
    success: function(output) {
      if (output == "OK") {
        alert("OK");
      } else {
        alert(output);
      }

    }
  });
};

我尝试直接创建formData，一切都没有用。 $_POST['dados']未设置。什么事情都在发生？

Answer 1

您不能使用FormData对象作为参数的值，它必须是整个data:值。如果要添加其他参数，请使用FormData.append()。

function AddLang(e) {
  //var data = $("#add-lang-form").serialize();
  e.preventDefault ? e.preventDefault() : e.returnValue = false;
  var form = document.getElementById('add-lang-form');
  var formData = new FormData(form);
  formData.append('caller', 'addlang');

  $.ajax({
    url: 'PHP_FILE',
    enctype: 'multipart/form-data',
    processData: false,
    contentType: false,
    cache: false,
    data: formData,
    type: 'POST',
    beforeSend: function() {
      $("#login_btn").html('<i class="fa fa-2x fa-cog fa-spin"></i>');
      $("#login_btn").attr("disabled", true);
    },
    success: function(output) {
      if (output == "OK") {
        alert("OK");
      } else {
        alert(output);
      }

    }
  });
};

AJAX formData无法正常工作

1 个答案: