0

以下は、jQuery Ajax メソッドを使用して作成した Ajax コードです。

$(".loading_msg").show();
$.ajax({
    type: "POST",
    url: "submit_ops.php?action=submit_form",
    data: $( "#frmMyForm" ).serialize(),
    success: function(result){
        if(result=='Success'){
            $("#msgContainer").html('<div style="color:#3CA322;font-weight:bold;font-size:14px;padding:10px;">Thank you.</div>');
            $("#msgContainer").fadeIn();
        }
        else{
            $("#msgContainer").html('<div style="color:red;font-size:12px;padding:10px;">' + result + '</div>');
            $("#msgContainer").fadeIn();
        }
    },
    error: function(){
        //console.log('error');
    },
    complete: function(){
        //console.log('complete');
        $(".loading_msg").hide();
        $("#submit").attr("disabled", false);
    }

});

ロジックは、Ajax リクエストが行われようとしているときはいつでも、

  1. .login_msg コンテナが最初に表示されます

  2. その後、ajax呼び出しが行われました

  3. 完了すると、再び .loading_msg が非表示になります。

問題は、スムーズに機能していないことです。そのため、ajax 呼び出しが行われると、ブラウザーは数秒間ハングしますが、読み込みメッセージは表示されません。しかし、リクエストが完了すると、ログインメッセージが0.5秒間表示され、リクエストの完了時に非表示に設定したため消えます。

したがって、リクエストが行われる前に .login_msg を表示する必要があります。

これに関する提案はありますか？前もって感謝します。

4

1 に答える 1

2

beforeSendの使用とcomplete設定を試してください$.ajax:

$.ajax({
    type: "POST",
    url: "submit_ops.php?action=submit_form",
    data: $( "#frmMyForm" ).serialize(),
    beforeSend:function(){
             $(".loading_msg").show();
        }
    complete:function(){
             $(".loading_msg").hide();
        }

    ....
    ....
});
于 2012-05-09T04:50:40.873 に答える