使用ajax和回调函数向/从函数传递/返回值

Question

I'm trying to read p_info array returned from the function getproductInfo containing a ajax call but I'm getting undefined value. I'm using a callback function to achieve this but still doesn't work. Where am I wrong?

$(document).ready(function() {

    function successCallback(data)
    {
        var name = data.name;
        var image = data.image;
        var link = data.link;

        var product_info = [name, image, link];
        console.log(product_info); // Correct: shows my product_info array
        return product_info;
    }

    function getProductInfo(prodId, successCallback) {
        $.ajax({
            type: "POST",
            url: "getProductInfo.php",
            data: "id=" + prodId,
            dataType: "json",
            success: function(data) {
                var p_info = successCallback(data);
                console.log(p_info); // Correct: shows my product_info array
                return p_info;    
            },
            error: function()
            {
                alert("Error getProductInfo()...");
            }
        });

        return p_info; // Wrong: shows "undefined" value
    }

    var p_info = getProductInfo(12, successCallback);
    console.log(p_info); // Wrong: shows an empty value
});

Answer 1

The code should speak for itself. But basically, you cant return an upper-level function inside a function. You must set a variable to be used to return after the ajax is submitted.

//This makes the p_info global scope. So entire DOM (all functions) can use it.
var p_info = '';

//same as you did before
function successCallback(data) {
    var name = data.name;
    var image = data.image;
    var link = data.link;

    var product_info = [name, image, link];
    return product_info;
}

//This takes prodID and returns the data.
function getProductInfo(prodId) {
    //sets up the link with the data allready in it.
    var link = 'getProductInfo.php?id=' + prodId;
    //creates a temp variable above the scope of the ajax
    var temp = '';
    //uses shorthand ajax call
    $.post(link, function (data) {
        //sets the temp variable to the data
        temp = successCallback(data);
    });
    //returns the data outside the scope of the .post
    return temp;
}

//calls on initiates.
var p_info = getProductInfo(12);
console.log(p_info);