see anything wrong in this ajax function call?

here is the js

$(document).ready(function() {



        $("#quantity").change(function() 
        {
            hash = $("#quantity").val(); //returns 0001 (ex)
            qPrice_price = ajaxCall(hash);
            alert(qPrice_price);
        });






});


    function ajaxCall(hash)
    {
        $.get("ajax.php", { id: hash },

        function(data)
        {
            return parseInt(data.price);

        }, "json");
    }

the ajax.php with a url like this: ajax.php?id=0001 returns this {"price":"5"} when i select the selection i get an alert of undefined.

this is what the html looks like

<select id="quantity" name="quantity">
            <option value="0001">250</option>
            <option value="0002">500</option>
            <option selected="selecte开发者_Go百科d" value="0003">1,000</option>
            <option value="0004">2,500</option>
            <option value="0005">5,000</option>
            <option value="0006">10,000</option>
            <option value="0007">20,000</option>
            <option value="0008">30,000</option>
            <option value="0009">40,000</option>
            <option value="0010">50,000</option>
            <option value="0011">100,000</option>
            </select>

Your code is alerting undefined because you're not returning anything from your ajaxCall() function, nor can you when you're using an asynchronous server call. Your callback function is run after the data is loaded from the server, long after your alert() has run. Try alerting inside the callback function like this:

function ajaxCall(hash)
    {
        $.get("ajax.php", { id: hash },

        function(data)
        {
            alert(parseInt(data.price));

        }, "json");
    }

It's also important to note that when you return parseInt(data.price)), you're not in the ajaxCall scope, so it's not returning anything at all to your alert. There is a way of turning async off in jQuery's server calls, but it's not advisable. Instead, as I've done above, think about putting your data handling logic in the callback function.

If you're dead set on having a do-it-all AJAX function (though, honestly, this is what jQuery's AJAX functions are and there's really no reason at all to do this), you can do something like this:

$(document).ready(function() {
        $("#quantity").change(function() 
        {
            hash = $("#quantity").val(); //returns 0001 (ex)
            qPrice_price = ajaxCall(hash, handleQuantityChange);
            alert(qPrice_price);
        });
});

function handleQuantityChange(data) {
    alert(data);
}

function ajaxCall(hash, callback) {
    $.get("ajax.php", { id: hash }, function(data) {
        callback(parseInt(data.price));
    }, "json");
}

The callback (function(data){return parseInt(data.price);}) is called when the HTTP response arrives.

You have to do what you want to do in the callback, you can't return anything from it.

Try this pattern instead:

    $("#quantity").change(function() 
    {
        var hash = $("#quantity").val(); //returns 0001 (ex)
        $.get("ajax.php", { id: hash },
            function(data)
            {
                doSomething(parseInt(data.price));
            }, "json");
    });

If you insist on using a separate ajax function which is guaranteed to return a value, you will have to incorporate some synchronous yuckery such as this:

function ajaxCall(hash)
{
    var rv = null;
    $.ajax({ url: "ajax.php", 
            data: { id: hash },
            async: false,
            dataType: 'json',
            success: function(data)
            {
                rv = parseInt(data.price);
            }
    });
    return rv;
}