Làm cách nào để sử dụng chức năng jQuery $ .ajax để dừng hoặc cho phép gửi biểu mẫu?

Question

$('#post_form').submit(function() { 
    $("#ajax_bar_loader").show(); 
    $.ajax({ 
     url: 'add.html', 
     data: $('#post_form').serialize(), 
     dataType: 'json', 
     type: 'post', 
     success: function(result) { 
      retVal = formCheck(result); 
     } 
    }); 

    return false; 
}); 

Đó là mã của tôi và thay vì "trả về false", tôi muốn cho phép mã đó nếu dữ liệu chứa trong "kết quả" cho biết. Làm thế nào tôi có thể thực hiện điều này?

Answer 1

Bạn có thể làm điều đó như thế này:

$.ajax({ 
    url: 'add.html', 
    data: $('#post_form').serialize(), 
    dataType: 'json', 
    type: 'post', 
    success: function(result) { 
     retVal = formCheck(result); 
     if(retVal) 
      $('#post_form').unbind('submit').submit(); 
     else 
      alert('Error with your form! Oh crap!'); 
    } 
}); 

Vì bạn đang đăng lại và để lại, điều này chỉ unbinds handler này nếu thành công và cho phép submit xảy ra bình thường khi gọi nó, vì vậy mã không chạy và kiểm tra lại, nó chỉ gửi.

Answer 2

 
    success: function(result) { 
     ... 
     document.forms.post_form.submit(); 
    } 

Answer 3

Tôi khuyên bạn luôn quay trở lại false ở cuối trình xử lý sự kiện để ngăn việc gửi biểu mẫu bình thường. Trong callback thành công cho $.ajax, bạn có thể có điều kiện chuyển hướng dựa trên phản hồi từ máy chủ:

$('#post_form').submit(function() { 
    $("#ajax_bar_loader").show(); 
    $.ajax({ 
     url: 'add.html', 
     data: $('#post_form').serialize(), 
     dataType: 'json', 
     type: 'post', 
     success: function(result) { 
      if(result == 'something') { 
       alert("some error happened"); 
      } else { 
       // assuming we're visiting the form's action 
       window.location.href = $(this).attr("action"); 
      } 
     } 
    }); 
    return false; 
}); 

Dựa trên gọi lại thành công cho kích hoạt trước khi xử lý nộp hoàn thành thi công là không thực tế, vì đoạn mã sau cuộc gọi $.ajax là rất có khả năng được đánh giá trước khi thực hiện gọi lại thành công ($.ajax sẽ chạy không đồng bộ).

Answer 4

Tôi không chắc chắn nếu điều này sẽ làm việc cho vấn đề của bạn nhưng nếu bạn thực hiện yêu cầu ajax đồng bộ thì sao?

Tôi nhận mã giả này để "hoạt động", nó kích hoạt yêu cầu ajax và sau đó đặt boolean. Sau đó, biểu mẫu trả về true hoặc false dựa trên boolean:

$(document).ready(function() { 
    $('form').submit(function() { 
     var should_return = false; 
     $.ajax({ 
      async: false, 
      url: 'test.php', 
      type: 'post', 
      success: function() { 
       // Do some type of check 
       should_return = true; 
      } 
     }); 
     return should_return; 
    }); 
});