Interrompi invio di una richiesta Ajax senza aggiornamento della pagina

Question

Ho creato una richiesta Ajax che invia alcuni dati al file php sull'evento click del pulsante. Ora, dopo aver inviato i dati, voglio limitare la richiesta di ajax di non inviare più e più volte i dati facendo clic sul pulsante. Invia i dati solo all'aggiornamento della pagina (significa inviare i dati una volta al caricamento della pagina). Come posso fermare tali richieste. Il mio codice ajax è la seguente:

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

basta sostituire .click() da .one()

Ciò impedirà più clic dalla esecuzione il nuovo $.ajax().

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

Se è necessario eseguire un post su un solo caricamento della pagina, si può semplicemente spostare il $.ajax() chiamata dal gestore di clic nella funzione pronta documento:

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

Answer 2

è necessario rimuovere click eventHandler dal pulsante dopo il successo della risposta Ajax.

Esempio

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

O

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

Answer 3

Un'analisi più approfondita potrebbe limitare la chiamata ajax una risposta positiva (cioè era lo stato 200 & & fatto che restituisci il risultato che stai cercando ? In tal caso, è possibile inserire questo codice nella funzione success della funzione XHR: requestLog.sendStatus = true; se si desidera consentire l'inizializzazione della richiesta ajax una volta, quindi inserire questo (requestLog.sendStatus = true;) subito dopo lo e.preventDefault Se si desidera consentire solo la chiamata ajax impedito se il loro era in realtà una risposta di successo quindi inserire il requestLog.sendStatus = true nella funzione success dell'oggetto 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; 
     } 
    }); 
}); 

Si desidera eseguire il caricamento della pagina solo una volta? Prova questo:

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

Answer 4

Proprio modificare in questo modo:

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

     } 

     }); 

    });