jQuery .submit（）成功または失敗のトリガー

Question

私はを使用して定期的にフォームを送信していますが、フォームが回転ホイールで保存されていることを確認してから保存してください。成功時にjQueryで.submit()のsuccessトリガーはありますか？

ありがとうございます！

Answer 1

.submit()の代わりに手動$.post()リクエストを使用することができます。 $.post()には成功のコールバックがあります。

$.post()（ターゲットURL）と.serialize()フォームの要素の詳細を入力する必要があります。

Answer 2

これを試してみてください：

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

注： プログラムでフォームを送信する場合は、$('#form').submit()をもう一度呼び出す必要がありますが、今度は引数を指定せずにsubmitイベントをトリガーする必要があります。

Answer 3

ページを送信しているときに回転ホイールを表示するには、アニメーションGIFを取得してみてください（無料のローディングサークルが多くあります）。このGIFがして、あなたのページに実装します。

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

、その後、使用jQueryのは：

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