$.post 刷新页面但 $.ajax 阻止刷新页面

Question

我有这个form:

<form id="frmValidate" action="Controller/Action" novalidate>
    <input type="text" placeholder="Enter Name" name="names"/><br/>
    <input type="submit" value="Submit form"/>
</form>

我有 jquery validation 插件申请了上面的 form 如下:

$("#frmValidate").validate({
    rules: {
        names: {
            required: true,
            minlength: 5
        }
    },
    messages:{
        names:{
            required:'Name is required',
            minlength: jQuery.validator.format("At least {0} characters required!")
        }
    },
    errorClass:'invalid',
    submitHandler:function(form){
        var url=$(form).attr('action');
        var formData=new FormData($("#frmValidate"));
        $.post(url,formData,function(){
            alert('submit Done'); 
        });
    }
});

当我使用 $.post 时，它是 shorthand 对应 $.ajax - POST，它会刷新页面，但是如果我使用类型为 Post 的 $.ajax，因为下面：

submitHandler:function(form){
    var url=$(form).attr('action');
    var formData=new FormData($("#frmValidate"));
    $.ajax({
        url:url,
        type: 'POST',
        data: formdata,
        processData: false,
        contentType: false,
        success:function(response){
            alert(response);
        },
        error:function(response){
            alert(response);
        }
    });
}

与 $.post 不同，这不会刷新页面并成功获得响应。我更喜欢 shorthand 方法，因为它简单而优雅。但是由于上述问题，我无法使用它。

Is there any way to prevent the default action of the form in submitHandler? or any information on why $.post doesn't prevent page from getting refreshed?

Answer 1

因为您使用的是 FormData();，而这只能与 xmlHttpRequest 一起使用，$.post() 没有，但 $.ajax() 有。这就是 $.ajax() 起作用而 shorthand $.post() 不起作用的原因。

submitHandler:function(form){
    var url=$(form).attr('action');
    var formData=$("#frmValidate").serialize(); // instead serialize it.
    $.post(url,formData,function(){
        alert('submit Done'); 
    });
}

还有一件事我想补充一点，如果您使用 FormData()，那么请确保传递 form 而不是 jQuery 对象：

var formData=new FormData($("#frmValidate")[0]);

如果您尝试通过 ajax 上传文件，那么我想您知道将这些选项设置为 false：

processData: false,
contentType: false

$.post 刷新页面但 $.ajax 阻止刷新页面

$.post refreshes the page but $.ajax prevents refreshing the page

ajax

jquery

jquery-validate