Question

我有一个包含文件的HTML表单。我希望能够捕获表单发布的响应并根据我的页面进行编辑而无需刷新。

为此，我正在使用Ajax调用来为我提交表单。但是，每当我打电话给new FormData(form)时，它都会提交表单，而不仅仅是获取表单数据。

这是HTML格式

<form asp-controller="Application" asp-action="UploadDocument" enctype="multipart/form-data">
    <input id="modalDocId" name="documentId" type="hidden" />
    <input id="modalAppId" name="applicationId" type="hidden" />
    <div class="modal-body">
        <div class="modal-display">
            <input name="documentFile" type="file" class="dropify pa-20" data-height="250" data-allowed-file-extensions="pdf jpg jpeg png" accept=".pdf,.jpg,.jpeg,.png" />
        </div>
    </div>
    <div class="text-center pb-10">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button>
    </div>
</form>

与Ajax通话

$(document).on('submit', 'form', function () {
    var form = $(this);
    var formData = new FormData(form);

    $.ajax({
        type: 'POST',
        enctype: 'multipart/form-data',
        url: '/Application/UploadDocument',
        data: formData,
        cache: false,
        success: function (data) {

            if (data == 1) {
                debugger;
            }
            else {
                debugger;
            }

            return false;
        }
    });

    return false;
})

它永远不会到达Ajax调用，在new FormData(form)表单被提交，并重定向到结果，即1或0。

我希望表单通过Ajax提交，因此页面不会重定向，但是我可以根据结果执行操作。

Answer 1

由于您使用的是委托事件处理程序，因此return false将无法工作；在这种情况下，它被称为来不及生效。要直接在提交事件中解决此调用preventDefault()。

还有其他几个问题：

您需要向FormData构造函数提供Element对象，而不是jQuery对象。

return false

success是多余的，应将其删除。
async: false是非常糟糕的做法，需要将其删除。无论如何在这种情况下都是没有必要的。
您需要添加contentType和processData选项，并将它们都设置为false，以便在请求中正确编码FormData。

话虽如此，请尝试以下操作：

$(document).on('submit', 'form', function (e) {
  e.preventDefault();
  var formData = new FormData(this);

  $.ajax({
    type: 'POST',
    url: '/Application/UploadDocument',
    data: formData,
    cache: false,
    contentType: false,
    processData: false, 
    success: function (data) {
      if (data == 1) {
        debugger;
      } else {
        debugger;
      }
    }
  });
})

无需提交表单的新FormData（form）

1 个答案: