在 jQuery ajax 请求中使用 FormData 对象使页面重定向

Question

我一直在我的网站中使用下面的 jQuery ajax 来向服务器提交表单数据，而无需重定向页面。

$(document).ready(() => {
    const form = $("#submitableform");
    form.submit((event) => {
        event.preventDefault();
        $.ajax({
            type: $(form).attr('method'),
            url: $(form).attr('action'),
            dataType : 'json',
            data: $(form).serialize(),
            success: (result) => formSuccessFunction(result),
            error: (xhr, resp, text) => {
                console.log(xhr, resp, text);
            }
        });
    });
});

一切正常。我可以提交表单，页面不会重定向，我可以在服务器应用程序中查看我的所有数据，并且 json 响应被发送回客户端。

我现在想上传带有此表单数据的缩略图。我发现我可以使用 FormData 对象来提交多部分表单数据。这似乎是我想要的。

我将 jQuery 调用更新为以下内容：

$(document).ready(() => {
    const form = $("#submitableform");
    form.onsubmit((event) => {
        let formData = new FormData(this);
        event.preventDefault();
        $.ajax({
            type: $(form).attr('method'),
            url: $(form).attr('action'),
            processData: false,
            contentType: false,
            data: formData,
            success: (result) => formSuccessFunction(result),
            error: (xhr, resp, text) => {
                console.log(xhr, resp, text);
            }
        });
    });
});

表单数据仍然找到了到达服务器的路径，但现在页面重定向到 url 中的页面。我完全不知道为什么。

关于我要上传的文件 - 只上传了文件名。这是正确的吗？我做了很多年了，我不记得那个了:)

有没有人知道为什么这个小改动现在使我的 ajax 请求.....而不是 ajax 请求。

提前致谢。

（PS 我没有显示我的 html 因为这根本没有改变并且原始请求有效。所有输入字段和表单 ID 等完全相同。）

Answer 1

The form data still find its way to the server but now the page redirects to the page in the url. I cannot figure out why at all.

在您使用的第一个处理程序中：

form.submit((event) => {

这是处理

的 .submit() 方法

.on( "submit", handler )

在您的第二个片段中，您使用的是：

form.onsubmit((event) => {

onsubmit 不是 jQuery 方法，因此是您的问题。

第二个问题与这一行有关：

let formData = new FormData(this);

改为：

let formData = new FormData(event.target);

函数上下文中的 this 关键字不是当前形式，而是默认的 window 对象。

在 jQuery ajax 请求中使用 FormData 对象使页面重定向

Using FormData object in jQuery ajax request makes page redirect

javascript

ajax

jquery

multipartform-data

form-data