android - jquery ajax GETリクエストが2回実行される

Question

ボタンをクリックするだけで実行される次の ajax リクエストがあります。

<a href="javascript:test()"><img src="css/images/test.png"></a>

function test(){
    console.debug("*");

    $.ajax({
        type: "GET",
        dataType: "json",
        url: '/path/to/url',
        success: function(data){
            console.debug("**");
        }, 
        error: function(jqXHR, status, error){
            console.debug("*** " + status + " : " + error + " : " + jqXHR.status);
        },
        cache: false
    });
}

要求応答が返されるまでに約 30 秒かかります。ただし、Apache ログで確認できるように、要求はサーバーによって 2 回受信され、実行されます。リクエストのタイムスタンプは 30 秒離れていますが、リクエストは同一です (例: ?_=1363692320782)。Apache の応答は 200 ですが、クリック応答関数は 1 回呼び出され、エラーコールバックは 1 回呼び出されます (最初の要求から正確に 60 秒後)。

この問題は、Samsung Galaxy S2、android バージョン 2.3.5 の phonegap アプリケーションで再現されています。

更新 - 以下のコメントから Apache ログエントリを追加

1.2.3.4 - - [19/Mar/2013:14:07:59 +0000] "GET /pcapi/records/dropbox/08342hjg9gpqm7g/?_=1363702072225 HTTP/1.1" 200 11139 "-" "Mozilla/5.0 (Linux; U; Android 2.3.5; en-gb; GT-I9100 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"
1.2.3.4 - - [19/Mar/2013:14:08:29 +0000] "GET /pcapi/records/dropbox/08342hjg9gpqm7g/?_=1363702072225 HTTP/1.1" 200 11139 "-" "Mozilla/5.0 (Linux; U; Android 2.3.5; en-gb; GT-I9100 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"

更新 - adb logcat

I/Web Console(16747): * at file:///android_asset/www/js/mobile.js:1769
I/Web Console(16747): *** error : : 0 at file:///android_asset/www/js/mobile.js:1779

更新 - TCP/IP モニター

要求を TCP/IP モニターに渡すと、両方の要求が 200 応答で送信されていることがわかります。

score 6 · Accepted Answer

ここで定義した URL パスurl: '/path/to/url'が特定のファイルではなくフォルダーへのパスである場合は、このように末尾にスラッシュを追加してみてくださいurl: '/path/to/url/'。

ファイルが指定されていない場合、Apache Web サーバーは 301 リダイレクトを新しい URL (末尾のスラッシュ付き) で AJAX クライアントに送信するため、クライアントは適切な URL に新しい要求を発行します。

ここに投稿された同様の質問を参照してください: jQuery $.ajax() は 2 回実行されましたか?

http://httpd.apache.org/docs/2.0/mod/mod_dir.html#directoryslashの Apache ドキュメントリファレンスを参照してください。

score 6 · Accepted Answer

Android 2.3.5 で実行されているアプリでこの正確な問題が発生しました。タイムアウト後に webview がリクエストを再試行しているとしか結論付けられませんでした。タイムアウトの期間に影響を与える方法が見つかりませんでした。

最後に、最初のリクエストがサーバー上の非同期プロセスをスピンオフし、すぐに返されるようにコードを書き直しました。次に、ページの setTimer から、サーバープロセスのステータスを確認します (ここでも、すぐに戻ります)。ステータスが「完了」になると、ページは次のステップに進みます。

それが役立つことを願っています。これに対するあなたの不満は確かに理解できます。私はそれと戦って数日過ごしました。

編集: これは、非同期ソリューションの方向に私を送った記事だった可能性があります。ここで述べられている問題はまったく同じだと思います。

Android での XmlHttpRequest 二重投稿の問題

score 3 · Accepted Answer

beforeSend:とcomplete:AND .ajaxSend()+の使用についてはどうですかajaxSuccess()、また試してみてくださいcache: true

$(document).ajaxSend(function (event, jqxhr, settings) {
    console.log("triggered ajaxSend !");

    if ( submission_active == true ) {
        jqxhr.abort();
    }

    submission_active = true;
});

$(document).ajaxSuccess(function (event, xhr, settings) {
    console.log("triggered ajaxSuccess !");
    submission_active = false;
});

$.ajax({
    type: "GET",
    dataType: "json",
    timeout: 30000,
    cache: false,
    url: '/path/to/url',
    success: function(data){
        console.debug("**");
    }, 
    beforeSend: function(xhr, opts){
        if(submission_active == true){
            xhr.abort();
        }

        submission_active = true;
    },
    complete: function(){
        submission_active = false;
    }
    error: function(jqXHR, status, error){
        console.debug("*** " + status + " : " + error);
    }
});

score 2 · Accepted Answer

クリックイベントが 2 回発生しています。以下のコードは、この問題を修正します。

$('.selector').unbind('click').bind('click', function () {
 //...
 // Ajax code
 //...
});

score 2 · Accepted Answer

モバイルサイトでこれを試してみましたが、唯一の問題は私のフォームにあり、次に私が宣言したjavascriptでした

$("#button_submit").onclick(function(){
   //ajax request here
});

また、ajaxを使用している場合は、アクションやメソッドなどのフォーム属性を削除することを忘れないでください

お役に立てれば幸いです^_^

score 1 · Accepted Answer

イベント伝播の問題のように聞こえます。私は（iOS上ではありますが）同様の症状を見ていましたが、「クリック」イベントを発生させる「タッチスタート」イベントと「タッチエンド」イベントに行き着きました。次のようなことを試しましたか：

$("a").click(function (e) {
    e.preventDefault();
    alert('Clicked');
    test();
});

お役に立てれば！
乾杯
JD

score 1 · Accepted Answer

 <a href="javascript:test()">

それはあなたの問題です。jquery を使用する場合は、css セレクターを使用してください!!!!!!!! その href:javascript はブラウザ/デバイス間でバグがあります。

score 0 · Accepted Answer

私は同じ問題に直面しました。送信ボタンでクリックイベントをバインドしていて、ajax が 2 回実行されました。イベントをバインドする代わりに、onClick以下のようにボタンにメソッドを使用しました

<button onclick"myProcess()"></button>

そしてそれは私の問題を解決します。

score 0 · Accepted Answer

あなたが直面している問題は一般的に「バウンス」と呼ばれ、電子機器のスイッチでも直面しています。ボタンを押して離すと、スイッチが2回トリガーされるため、機能の遅延を設定するか、一度バインドを解除する必要がありますあなたのクリックで完了します。

Ben Alman のスロットルスクリプトを使用してクリックをデバウンスすることができます。これは、複数の ajax 呼び出しが行われないようにするのに非常に役立ちます。それを遅延と組み合わせると、問題を修正する必要があります。

http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/

            var debounceClick = $.debounce(test, 1000);
            function test() {
                console.debug("*");
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: '/path/to/url',
                    success: function(data){
                        console.debug("**");
                    }, 
                    error: function(jqXHR, status, error){
                        console.debug("*** " + status + " : " + error + " : " + jqXHR.status);
                    },
                    cache: false
                });
            }

リンクから debounceClick 関数を呼び出して、問題を解決してください。

あるいは、throttle プラグインなしで単純なプレーンな JavaScript を使用して、結果を達成することもできます。

            var timeout;
            function test(){
                console.debug("*");
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: '/path/to/url',
                    success: function(data){
                        console.debug("**");
                    }, 
                    error: function(jqXHR, status, error){
                        console.debug("*** " + status + " : " + error + " : " + jqXHR.status);
                    },
                    cache: false
                });
            }

            function click() {
                if(timeout) {
                         clearTimeout(timeout);
                }
                timeout = setTimeout(test, 1000);
            }

この例では、click() 関数をリンクにバインドします。

android - jquery ajax GETリクエストが2回実行される

9 に答える 9

Related

Reference