ajax表单提交重定向类似于非ajax表单

ajax form submit redirect like a not ajax form

本文关键字：ajax 表单 重定向 表单提交 类似于      更新时间：2023-09-26

我有这个代码，用来提交带有附件文件的表单

$("#career_form").submit(function(e){
    var this_current = $(this);
    var formData = new FormData(this_current[0]);
    var url = this_current.attr("action");
    $.ajax({
        url : url,
        data: formData,
        type: 'post',
        cache: false,
        async: true,
        beforeSend: function(){  },                   
        success: function(response){
            if(response === true){
                alert("successfully sent");
            }
        }
    });
    e.preventDefault();
});

但是表单一直将我重定向到它的目标文件"操作中的url"，就像它不是ajax提交一样，但如果我用替换"data"参数

data: $(this).serialize();

它有效（ajax提交），有什么想法、帮助、建议、建议吗？

给出e.preventDefault（）；在函数的开头。

jQuery尝试在默认情况下将数据转换为查询字符串，但使用new formData时会引发错误。

要将formData用于jquery ajax请求，请使用选项processData并将其设置为false，如：

 $.ajax({
        url : url,
        data: formData,
        type: 'post',
        cache: false,
        async: true,
    processData: false,
        beforeSend: function(){  },                   
        success: function(response){
            if(response === true){
                alert("successfully sent");
            }
        }
    });

这就是为什么它适用于serialize，而不适用于示例中的formData的原因。

e.preventDefault工作正常，但如果之前出现错误，它将无法工作。通过将e.preventDefault放在函数的顶部，无论以后的代码中是否有错误，它都会阻止该操作。

您可以编辑代码中的var formData = new FormData(this_current[0]);，并使用以下行：

var formData = new FormData(document.querySelector("#career_form"));

此外，如果您使用多部分表单发送表单中的文件，则需要在ajax调用中设置以下参数。

  processData: false,  // tell jQuery not to process the data
  contentType: false   // tell jQuery not to set contentType

希望这能有所帮助。有关使用formData的更多信息，请参见此处。

试试这个：

$("#career_form").submit(function(e){
    e.preventDefault();
    var fd = new FormData(document.querySelector("form"));
    fd.append("CustomField", "This is some extra data");
    $.ajax({
        url: "change-status.php",
        type: "POST",
        data: fd,
        processData: false,
        contentType: false,
        success: function(response){
            if(response){
                alert("successfully sent");
            }
        }
    });
});
相关文章：