wyzwalacz sukcesu lub niepowodzenia jQuery .submit()

Question

Używam .submit() do okresowego przesyłania mojego formularza przez ajax, ale chcę, aby użytkownik zobaczył, że formularz jest zapisywany za pomocą obracającego się koła, a następnie "Zapisany!" po sukcesie. Czy w jQuery występuje wyzwalacz success dla .submit()?

Dzięki!

Answer 1

Możesz użyć żądania ręcznego $.post() zamiast .submit(). Numer $.post() oddzwoni pomyślnie.

Musisz podać szczegółowe informacje na temat elementów formularza: $.post() (docelowy adres URL) i .serialize().

Answer 2

Spróbuj tego:

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); 
} 
?> 

Uwaga: Jeśli przesyłasz formularz programowo, musisz ponownie zadzwonić pod numer $('#form').submit(), ale tym razem bez argumentów, aby wywołać zdarzenie submit.

Answer 3

Aby wyświetlić obracające się kółko podczas przesyłania strony, spróbuj uzyskać animowany GIF (jest wiele bezpłatnych kręgów ładowania). Ten GIF wdrożyć na swojej stronie z:

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

a następnie użyć jQuery:

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