पेज रीफ्रेश के बिना AJAX अनुरोध भेजने बंद करें

Question

मैंने AJAX अनुरोध बनाया जो बटन क्लिक ईवेंट पर php फ़ाइल में कुछ डेटा भेजता है। अब डेटा जमा करने के बाद मैं AJAX अनुरोध को प्रतिबंधित करना चाहता हूं कि बटन को क्लिक करके डेटा को बार-बार न भेजें। यह केवल पृष्ठ रीफ्रेश पर डेटा भेजता है (मतलब पृष्ठ लोड पर एक बार डेटा भेजना)। मैं ऐसे अनुरोध कैसे रोक सकता हूं। मेरे 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

बस .click() द्वारा .one()

यह अनेक क्लिक कर पाएगा अपने $.ajax() फिर से चलने से बदलें।

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

आप केवल पृष्ठ लोड पर एक पोस्ट प्रदर्शन करने की जरूरत है, तो आप बस क्लिक हैंडलर से $.ajax() कॉल दस्तावेज़ तैयार समारोह में स्थानांतरित कर सकते हैं:

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

Answer 2

आप बटन से click eventHandler हटाने की जरूरत सफल अजाक्स प्रतिक्रिया के बाद।

उदाहरण

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

या

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

Answer 3

एक गहरे विश्लेषण एक सफल जवाबी कार्रवाई के लिए ajax कॉल प्रतिबंधित कर सकता है (यानी स्थिति 200 & & यह किया था जिस परिणाम को आप ढूंढ रहे हैं उसे वापस करें ? यदि ऐसा है तो आप इस कोड को XHR फ़ंक्शन के success फ़ंक्शन में डाल सकते हैं: requestLog.sendStatus = true; यदि आप केवल AJAX अनुरोध को प्रारंभ करने की अनुमति देना चाहते हैं तो e.preventDefault के बाद यह (requestLog.sendStatus = true;) डालें यदि आप केवल AJAX कॉल को अनुमति देना चाहते हैं अगर वे वास्तव में एक सफल प्रतिक्रिया में थे तो रोक दिया गया था और requestLog.sendStatus = true को success AJAX ऑब्जेक्ट के फ़ंक्शन में रखा गया था।

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

आप इसे केवल एक बार लोड लोड पर चलाना चाहते हैं? इस प्रयास करें:

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

Answer 4

बस इस तरह संशोधित:

$(".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); 

     } 

     }); 

    });