Question

我一直在我的网站上使用以下jQuery ajax将表单数据提交到服务器而不重定向页面。

＆＃13;

$(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);
            }
        });
    });
});

＆＃13;

一切都很好。我可以提交表单，页面没有重定向，我可以在服务器应用程序中查看我的所有数据，并将json响应发送回客户端。

我现在想要使用此表单数据上传缩略图。我发现我可以使用FormData对象提交multipart-formdata。这似乎是我想要的。

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

＆＃13;

$(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);
            }
        });
    });
});

＆＃13;

表单数据仍然可以找到服务器，但现在页面会重定向到网址中的页面。我根本无法弄明白为什么。

另外关于我要上传的文件 - 只上传文件名。这是正确的吗？自从我完成它之后的几年，我不记得那个：）

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

提前致谢。

（PS我没有显示我的HTML，因为它根本没有改变，原始请求有效。所有输入字段和表单ID都完全相同。）

Answer 1

表单数据仍然可以找到服务器，但现在页面会重定向到网址中的页面。我根本无法弄明白为什么。

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

form.submit((event) => {

这是处理

的.submit()方法

.on（“submit”，handler）

在你的第二个片段中，你正在使用：

form.onsubmit((event) => {

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

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

let formData = new FormData(this);

将其更改为：

let formData = new FormData(event.target);

函数上下文中的 this 关键字不是当前表单，而是默认窗口对象。

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

1 个答案: