Question

我试图让“添加到购物车”按钮仅执行实际提交（进入添加到购物车页面），如果ajax调用成功返回，否则显示ajax结果中给出的消息实际上并没有执行提交。

这是我到目前为止所拥有的

$("#addtocart").submit(function(event){
    var data = $(this).serialize();

    $.ajax({
        type: "POST",
        url: "/cart/check",
        dataType:"json",
        data: data
    }).done(function(data){ 
        $("#message").html(data.message);              
        if (data.success == true) this.submit();         
    })
    event.preventDefault();         
});

如果我删除event.preventDefault（），表单总是提交，无论检查如何，如果我将其保留，它永远不会提交。也许this.submit（）不是正确的解决方案。我读过某个地方，只有在验证没有成功的情况下才能调用防止默认，但如果我试试

if (data.success == false) event.preventDefault();

无论data.success是true还是false

，它仍会提交表单如果有人能够解决如何做到这一点，我会非常感激

Answer 1

在完成回调中的

this是jqXhr对象而不是表单，如果你想要将表单绑定为done函数的上下文，请使用`context config。

$.ajax({
    context: this, //<-- the form
    ...

Answer 2

this不是回调中的表单，因为这通常设置为调用者的上下文，这是jQuery的代码，而不是你的回调。有几种不同的方法可以解决它：

使用context的{{1}}属性将回调中的$.ajax设置为您想要的内容 - 可能是this：

this

使用$.ajax({ ... context: this })代替$("#addtocart")。但是，如果您改变对所使用的选择器的看法，或者想要对多个不同的表单使用相同的代码，则可扩展性较差。

使用this（或event.target）在事件的目标上运行代码，无论它恰好是什么元素。这意味着如果你决定仍然想要使用它，你仍然可以通过$(event.target)访问jQuery XHR对象，尽管这对你来说根本不重要。

仅在ajax验证成功后才提交表单

2 个答案: