0

承認プロセスを偽装するプロトタイプ (コンセプト) ページの作成。

ユーザーが#view_moreボタンをクリックすると、"Requesting More Time" というメッセージが div に表示され、javascript が AJAX を使用して PHP スリープ関数を 10 秒間呼び出す間、表示され続けることが望ましい動作です。

ただし、メッセージは表示されません。代わりに、非同期 ajax 呼び出しにより 10 秒の遅延が発生し、処理が続行される前にメッセージが一瞬表示されます。どうすればこれを修正できますか?

ジャバスクリプト:

$(document).on('click', '#view_more', function() {
    var cust = $('#cust').val();
    $('#buttons').html('<div id="countdown">Requesting More Time...</div>');
    $('#buttons').show();
    //Now, send email to admin
    $.ajax({
        type: "POST",
        url: "ajax/ax_all_ajax_fns.php",
        data: 'request=more_viewing_time_requested_send_email&cust='+cust
    });
    $.ajax({
        type: "POST",
        async: false,
        url: "ajax/ax_all_ajax_fns.php",
        data: 'request=sleep_timer&delay=10'
    });
    alert('Additional viewing time authorized for this account.');
    location.reload(true);
});

PHP (ax_all_ajax_fns.php):

if ($_POST['request'] == 'sleep_timer') {
    $delay = (int)$_POST['delay'];
    sleep($delay);
}
4

1 に答える 1

0

最終的に自分の質問に答えることができるときはいつでもいいです。

解決策は、後で発生させたいことを、以前のものの成功コールバック関数内に配置することです。これにより、次のようになります。

  1. 「リクエストが進行中です」というメッセージを表示する
  2. AJAX 呼び出し: more_viewing_time_req_send_email()
    2(a)。in send_email success function: AJAX 呼び出し: sleep_timer() 10 秒
            2(a)(i)。in sleep success function: 「Request Approved」メッセージ
            2(a)(ii) を表示します。in sleep success function: 最終的な目的のアクションを実行します

ソリューションは次のようになります。

$(document).on('click', '#view_more', function() {
    var cust = $('#cust').val();
    $('#buttons').html('<div id="countdown">Requesting More Time...</div>');
    $('#buttons').show();
    //Now, send email to admin
    $.ajax({
        type: "POST",
        url: "ajax/ax_all_ajax_fns.php",
        data: 'request=more_viewing_time_requested_send_email&cust='+cust,
        success: function() {
            $.ajax({
                type: "POST",
                async: false,
                url: "ajax/ax_all_ajax_fns.php",
                data: 'request=sleep_timer&delay=10',
                    success: function() {
                        alert('Additional viewing time authorized.');
                        location.reload(true);
                    } //END success #2
            }); //END $.ajax #2
        } //END success #1
    }); //END AJAX more_viewing_time_send_email
}); //END $('view_more').click()

疑問に思っている人のために（私がかつてそうであったように、それほど昔ではありませんでした）...私が使用して$(document).on()いる理由は、View Moreボタン自体が以前のAJAX呼び出しによって以前にDIVに挿入されたためです。ページが最初にレンダリングされたとき、[もっと見る] ボタンはページに存在しなかった$(document).on()ため、クリック イベントをトラップするために使用する必要があります。より一般的な$('#view_more).click()コードを使用した場合、これらのイベントを認識できなかったため、コードは機能しませんでした。

于 2013-05-16T22:50:53.060 に答える