Returning JSON data using jQuery POST function from server

Question

I am trying to return a json encoded string from PHP script.

$.post("order.php", { product: product_id, coupon: coupon },
function(data) {
    $("#price").html("$" + data.price);
    $("#discount").html("$" + data.discount);
    $("#total").html("$" + data.total);
});

I tried to use alert function in callback to see returning value from PHP:

{"price":249,"discount":"0.00","total":249}

but value of #price and rest elements is "$undefined".

Please help.

Answer 1

It seems you just have to parse the JSON data into an object using parseJSON() :

$.post("order.php", { product: product_id, coupon: coupon },
function(data) {
    data = $.parseJSON( data );
    $("#price").html("$" + data.price);
    $("#discount").html("$" + data.discount);
    $("#total").html("$" + data.total);
});