Отправить форму только после успешной проверки ajax

Question

Я пытаюсь, чтобы кнопка «добавить в корзину» выполняла фактическую отправку (перейдите на страницу с добавленной корзиной), если вызов ajax возвращается успешно, в противном случае отобразится сообщение, данное в результате ajax, и фактически не выполняет submit.

это то, что я до сих пор

$("#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() не является правильным решением. Я где-то читал, что preventdefault следует называть только если не было никакого успеха на проверки, но если я попробовать

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

она до сих пор отправляет форму независимо от того, если data.success является истинным или ложным

я» d быть настолько благодарным, если у кого-то есть решение о том, как это сделать.

Answer 1

this внутри сделанного обратного вызова является объектом jqXhr не формой, если вы хотите связать форму как контекст выполняемой функции, контекстная конфигурация.

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

Answer 2

this не ваша форма внутри обратного вызова, потому что это, как правило, устанавливается в контексте вызывающего абонента, который является код JQuery, а не ваша, для этого обратного вызова. Есть несколько различных способов, которыми вы можете это исправить:

Используйте context свойства $.ajax установить this в обратном вызове, чтобы все, что вы хотите, чтобы это было - вероятно, this для вас:

$.ajax({ 
    ... 
    context: this 
}) 

Использование $("#addtocart") вместо this. Тем не менее, это менее растяжимо, если вы передумаете о селекторе, который используете, или хотите использовать один и тот же код для нескольких разных форм.

Использовать event.target (или $(event.target)) для запуска кода на цель события, независимо от того, каким будет этот элемент. Это означает, что вы все равно можете получить доступ к объекту jQuery XHR через this, если вы решите, что хотите по-прежнему использовать его, хотя это может и не иметь значения для вас вообще.