Ajax not giving response even on Success

Question

I have a simple page

$.ajax({
    url: "abc.php",
    type: "POST",
    async: false,
    dataType: 'json',
    data:  { 'json': JSON.stringify(match) , 'source': source} ,
    success: function(response){
        alert("Alert 1");
    }
});



alert("hello");
location.reload();

It always alert as "hello" , I also tried fail: but couldn't find the proper results. Please help me in this regard

Answer 1

The problem is as soon as you sent the request, you are reloading the page - without waiting for the response of the ajax request to comeback.

The solution is to do the reload on the ajax request success/complete callback

$.ajax({
    url: "abc.php",
    type: "POST",
    async: false,
    dataType: 'json',
    data:  { 'json': JSON.stringify(match) , 'source': source} ,
    success: function(response){
        alert("Alert 1");
    }
}).fail(function(xhr, status, error){
    alert('error:' + status + ':' + error+':'+xhr.responseText)
}).always(function(){
    location.reload();
});

Answer 2

If this is your full code, you are not giving time to execute your ajax call abc.php. You are just refreshing the page without waiting for the ajax to response.

From Jquery doc, The first letter in Ajax stands for "asynchronous," meaning that the operation occurs in parallel and the order of completion is not guaranteed.