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>

我已为上述form申请 jquery validation 插件，如下所示：

$("#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作为$.ajax - POST的简写时，它会刷新页面，但如果我使用$.ajax类型为Post，则如下所示：

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不同，这不会刷新页面并成功获得响应。我更喜欢速记法，因为它简单而优雅。但由于上述问题，我无法使用它。

有没有办法阻止form的默认操作 submitHandler？或者有关$.post无法阻止页面刷新的原因的任何信息？

Answer 1

因为您使用的是FormData();，而且这只能与xmlHttpRequest一起使用，而$.post()除$.ajax()之外没有$.ajax()。这就是为什么$.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，请确保传递var formData=new FormData($("#frmValidate")[0]);而不是jQuery对象：

false

如果您尝试通过ajax上传文件，我猜您知道将这些选项设置为processData: false, contentType: false：

javax

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

1 个答案: