AJAX wont apply value to variable

Question

I really don't know whats wrong with my code.. I want to store the result of a AJAX request in a variable. The result is a IMG Url an i want to preload it.

    $.ajax({
        type: "POST",
        url: 'code/submit/submitGetUserData.php',
        data: 'id=' + right1,
        complete:function(jqXHR,status){
            preloadLeft = new Image();
            preloadRight.src = jqXHR.responseText;
            console.log('src='.preloadRight.src);
        }
    });

But the variable is undifined -> JS wont store the result in the variable unless i make the request async. But thats taking too much time...

I hope anyone can help me! :)

Answer 1

you are passing data in wrong syntax and always add success function, and also always add error handling function as well, so that you can know if ajax call is failed from server side.

do like this:

var preloadLeft;


$.ajax({
        type: "POST",
        url: 'code/submit/submitGetUserData.php',
        data: {id: right1},
        success:function(jqXHR,status){
            preloadLeft = new Image();
            preloadRight.src = jqXHR.responseText;
            console.log('src='.preloadRight.src);
        },
        error: function(){
alert("error occured");

}

    });

Answer 2

Try to use the success to read the ajax response.

Try this:

 $.ajax({
url: 'code/submit/submitGetUserData.php',
type: 'POST',
cache: false,
contentType: 'application/json',
data: 'id=' + right1,
success: function (data) {

    console.log(data);

},
error: function (request, xhr) {
    alert(request.responseText);
},
complete: function () {

}

});

Observe what the data object contains when the ajax call is returned.

Hope it helps,

Ricardo