首页 > 解决方案 > 如何使用 ajax 正确地将数据传递给 php?

问题描述

我正在尝试将 FormData 发送到 PHP 文件。按下提交时没有任何反应,但是当我单独发送数据时它确实有效。

<form method="post" class="code_form" enctype="multipart/form-data">
  <input id="my_file_id2" class='upload_img' type="file" name="my_file">
  <input id="code" class='code' type="text" name="my_text">
  <input type="submit" id='fertig-btn' class='prime_sty' name="submit">
</form>
$(".code_form").on("submit", function(e) {
  var formData = new FormData();
  
  if ($(".upload_img").val() != '') {
    file = $(".upload_img").prop('files')[0];
    formData.append("my_file", file);
  }
  
  var dota = $(".code").val();
  
  $.ajax({
    type: "POST",
    url: "img_proc.php",
    cache: false,
    contentType: false,
    processData: false,
    data: {
      formData,
      dota,
    },
    success: function(data) {
      $(".user-success-code").html(data);
    }
  })

  e.preventDefault();
});

像这样发送数据有效:

data: formData,

知道如何解决吗?

标签: javascriptjqueryajaxform-data

解决方案


使用 FormData 对象发送数据时,所有信息都必须在该对象中。因此,您需要append().code到它的值,就像处理文件信息一样。试试这个:

$(".code_form").on("submit", function(e) {
  var formData = new FormData();
  formData.append('dota', $(".code").val());
  
  if ($(".upload_img").val() != '') {
    formData.append("my_file", $(".upload_img").prop('files')[0]);
  }  
  
  $.ajax({
    type: "POST",
    url: "img_proc.php",
    cache: false,
    contentType: false,
    processData: false,
    data: formData,
    success: function(data) {
      $(".user-success-code").html(data);
    }
  })

  e.preventDefault();
});

推荐阅读