jQuery .submit() trigger thành công hay thất bại

Question

Tôi đang sử dụng .submit() để gửi biểu mẫu của tôi qua định kỳ ajax, nhưng tôi muốn người dùng thấy biểu mẫu đang được lưu bằng một bánh xe quay và sau đó 'Đã lưu!' sau khi thành công. Có kích hoạt success cho .submit() trong jQuery không?

Cảm ơn!

Answer 1

Bạn có thể sử dụng yêu cầu $.post() thủ công thay vì số .submit(). $.post() có một cuộc gọi lại thành công.

Bạn sẽ phải điền chi tiết của các URL $.post() (URL mục tiêu) và .serialize() các yếu tố của biểu mẫu của bạn.

Answer 2

Hãy thử điều này:

jQuery:

$(document).ready(function() { 
    $('#form').submit(function() { 
     var status = '<img class="loading" src="loading_detail.gif" alt="Loading..." />'; 
     $("#ajax").after(status); 
     $.ajax({ 
      type: 'POST', 
      url: $(this).attr('action'), 
      data: $(this).serialize(), 
      dataType: 'json', 
      success: function(json) { 
       if(json.type == 'success') { 
        $('#msg').css("color","green").html(json.message); 
       } else if(json.type == 'warning'){ 
        $('#msg').css("color","yellow").html(json.message); 
       } else if(json.type == 'error'){ 
        $('#msg').css("color","red").html(json.message); 
       } 
       $('.loading').remove(); 
      } 
     }) 
     return false; 
    }); 
}); 

Html:

<div id="msg"></div> 
<form id="form" method="post" action="action.php" > 
    <input type="text" name="email" /> 
    <input type="submit" name="submit" value="submit" /><span id="ajax"></span> 
</form> 

action.php:

<?php 
if(isset($_POST['email'])){ 
$val = $_POST['email']; 
switch ($val) { 
    case 'email@site.com': 
     $return = array('type'=>'success', 'message'=>'This is success message!'); break; 
    case 'email': 
     $return = array('type'=>'warning', 'message'=>'This is warning message!'); break; 
    default: 
     $return = array('type'=>'error', 'message'=>'This is error message!'); 
} 
echo json_encode($return); 
} 
?> 

Lưu ý: Nếu bạn gửi biểu mẫu theo chương trình, bạn cần gọi lại $('#form').submit() nhưng lần này không có đối số để bạn kích hoạt sự kiện gửi.

Answer 3

Để hiển thị bánh xe quay trong khi gửi trang, hãy thử tải GIF động (có nhiều vòng tải miễn phí). GIF này thực hiện trong trang của bạn với:

class="myloadingcircle" style="display:none" 

và sau đó sử dụng jQuery:

$("form").submit(function(e) { $(".myloadingcircle").show(); });