javascript - 使用 Ajax Post Call 发送 FormData 会导致 Get

Question

我有一个简单的表单，我试图通过 POST 发送，但我一辈子都无法让它工作。

我最初使用 AJAX 加载表单内容，

$(function() {
  var arg = {
    "operation": "upload",
    "step": "0"
  };
  fetchForm(arg, "#form");
});

然后调用这段简单的代码:

function fetchForm(arg, resultTarget){
  $.post("./form.php", arg, function(data){
    $(resultTarget).html(data);
  }).fail(function(xhr, ajaxOptions, throwError){
    alert(throwError);
  }).done( function(){	
	  afterAjax();
  });
}

它从服务器获取表单并加载内容。我有一些输入字段和提交按钮。在以前的表单中，我会快速处理表单并再次将其 POST 到服务器。

function processForm(){
	var form = $("#form form").serialize();
	fetchForm(form, "#form");
}

但是，因为我要附加 BASE 64 URL 图像，所以我使用表单数据对象，然后将其存储在预览元素中:

function handleFiles() {
  var preview = $("#previewImg")[0];
  var file = $("#fileUpload")[0].files[0];

  preview.setAttribute("name", file.name);
  var reader = new FileReader();

  reader.addEventListener("load", function() {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

function customProcessForm() {
  var data = new FormData();
  data.append("operation", $("#operation")[0].val);
  data.append("step", $("#step")[0].val);
  data.append("u_stuNumber", $("#number")[0]);
  data.append("u_fileName", $("#previewImg")[0].getAttribute("name"));
  data.append("u_dataURL", $("#previewImg")[0].src);


  console.log("Button Clicked");
  $.ajax({
    method: "POST",
    url: "./form.php",
    data: data,
    processData: false,
    contentType: false
  });

}

上传图像时，我读取文件，设置预览源和图像名称。当用户选择提交时，将检索该信息。

但是我在控制台中看到以下内容，

jquery.min.js:4 XHR failed loading: POST "https://[url]/form.php"

更奇怪的是我的变量显示为获取消息:

image.html?operation=upload&step=1&u_stuNumber=Foobar&photos=IMG_1435.JPG

我不知道我在这里做错了什么。

编辑:这是 HTML 表单:

<form roll="form" accept-charset="utf-8" autocomplete="off">
  <input id="operation" type="hidden" name="operation" value="upload">
  <input id="step" type="hidden" name="step" value="1">
  <fieldset id="residentInfo">
    <legend>Your Information</legend>
    <div class="form-group">
      <label for="number" class="sr-only">Your Name</label>
      <input class="form-control" id="number" type="text" name="u_stuNumber" placeholder="Your Name" autofocus required>
    </div>
  </fieldset>
  <fieldset id="issueInfo">
    <div class="form-group col-md-4 text-center">
      <label for="previewImg" class="sr-only">Problem Location</label>
      <img src="assets/images/preview.png" alt="preview" id="previewImg" name="u_container" class="img-thumbnail">
    </div>
    <div class="form-group col-md-8">
      <input type="file" class="form-control" id="fileUpload" accept="image/*" aria-label="Photo Upload" name="photos">
      <br>For some users the preview image may appear sideways. It will be corrected on submission.
      <button id="submit" class="btn btn-lg btn-primary btn-block" type="submit" onclick="customProcessForm()">Test</button>
    </div>



  </fieldset>
</form>

Answer 1

您的所有问题都归结于onclick="customProcessForm()"。

当您点击提交按钮时:

1. 触发 onclick 处理程序
2. 触发 Ajax 请求
3. JS 完成
4. 表单提交
5. Ajax 请求被取消
6. 浏览器加载新页面(提交表单的结果)

您需要取消表单的默认行为。

快速但肮脏的方法是将 return false 添加到 onclick 属性。

明智的做法是:

1. 设置表单，使其无需 JS 即可运行。给它一个合理的action、method和enctype
2. 删除 onclick 属性
3. 使用 JavaScript ($('...').on('submit', someFunction) 绑定(bind)您的事件处理程序
4. 使用 event.preventDefault() 停止 JS 运行时表单的默认行为