Question

I created ajax request that sends some data to php file on button click event. Now after submitting data I want to restrict the ajax request not to send the data again and again by clicking the button. It sends the data only on page refresh ( means send data one time on page load ). How can I stop such requests. My ajax code is as follow :

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

Just replace .click() by .one()

This will prevent multiple clicks from running your $.ajax() again.

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

If you need to perform a post on page load only, you can simply move the $.ajax() call from the click handler into the document ready function:

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