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()"。

单击“提交”按钮时：

触发onclick处理程序
Ajax请求触发
JS完成
表单提交
Ajax请求已取消
浏览器加载新页面（提交表单的结果）

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

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

明智的做法是：

设置表单，使其无需JS。给它一个明智的action，method和enctype
摆脱onclick属性
使用JavaScript ($('...').on('submit', someFunction)绑定您的事件处理程序
使用event.preventDefault()在JS运行时停止表单的默认行为

使用Ajax Post Call发送FormData导致Get

1 个答案: