ページをリフレッシュせずにajaxリクエストを送信しないようにする

Question

ボタンクリックイベントでphpファイルにデータを送信するajaxリクエストを作成しました。今すぐデータを送信した後、ボタンをクリックして何度もデータを送信しないようにajaxリクエストを制限します。それはページリフレッシュ時にのみデータを送信します（ページロード時にデータを1回送信することを意味します）。どのように私はそのような要求を止めることができる。私のAjaxのコードは以下の通りです：

$(".button").click(function (e) { 
    e.preventDefault(); 
    $.ajax({ 
     type: 'post', 
     cache: false, 
     url: 'my/ajaxrequest.php', 
     data: { 
      result: 'hi test data' 
     }, 
     success: function (resp) { 
      $("#result").html(resp); 
     } 
    }); 
}); 

Answer 1

ただ、これはもう一度$.ajax()を実行しているから、複数のクリックを防ぐことができます.one()

で.click()を交換してください。

$(".button").one('click', function(e) { 
    e.preventDefault(); 
    $.ajax({ ... }); 
} 

あなただけのページの負荷にポストを実行する必要がある場合、あなたは、単に文書レディ機能にクリックハンドラから$.ajax()コールを移動することができます：あなたがボタンからclick eventHandlerを削除する必要が

$(function() { 
    $.ajax({ 
     type: 'post', 
     cache: false , 
     url: 'my/ajaxrequest.php', 
     data: { result : 'hi test data' }, 
     success: function(resp) { 
      $("#result").html(resp); 
     } 
    }); 
}); 

Answer 2

成功したAjaxレスポンスの後。

例

$("#Btn").unbind("click");

OR

$.off("click", "input:button", foo);

Answer 3

より深い分析は、1つの正常な応答にAJAX呼び出しを制限することができ（すなわち、ステータス200 & &はそれをやりました。あなたが探している結果を返す？もしそうなら、XHR関数のsuccessにこのコードを書くことができます：requestLog.sendStatus = true; ajaxリクエストの初期化を1回だけ許可したい場合は、e.preventDefaultの直後にこの（requestLog.sendStatus = true;）を入れてください。ajaxコールを許可する実際に成功した場合は、requestLog.sendStatus = trueをajaxオブジェクトのsuccessファンクションに入れてください。

var requestLog = {}; 
    requestLog.sendStatus = false; 

$(".button").click(function(e) { 
    e.preventDefault(); 
    if(requestLog.sendStatus) return; 
    /* requestLog.sendStatus = true; */ 
    $.ajax({ 
     type: 'post', 
     cache: false , 
     url: 'my/ajaxrequest.php', 
     data: { result : 'hi test data' }, 
     success: function(resp) { 
      $("#result").html(resp); 
      requestLog.sendStatus = true; 
     } 
    }); 
}); 

ロードは1度だけ実行しますか？これを試してみてください：

(function() { 
    $.ajax({ 
    type: 'post', 
    cache: false , 
    url: 'my/ajaxrequest.php', 
    data: { result : 'hi test data' }, 
    success: function(resp) { 
      $("#result").html(resp); 
    } 
    }); 
}()); 

Answer 4

はちょうどこのように変更します。それは、1つまたは上

$(".button").click(function(e) { 
     e.preventDefault(); 
$(".button").unbind('click'); //unbind the bound event after one click 
    $.ajax({ 
     type: 'post', 
     cache: false , 
     url: 'my/ajaxrequest.php', 
     data: { result : 'hi test data' }, 
     success: function(resp) { 
     $("#result").html(resp); 

     } 

     }); 

    });