Search code examples
javascriptjqueryajaxresponseinspector

Ajax response ok in inspector, not working in jquery

When I make an Ajax call, I can see the correct response value in the browser inspector. But, when I want to use that response in js, I can not. 

$(document).ready(function(){
    $("button").click(function(){
        var origin = "US";
        var price = "277";
        var currency = "AED";
        var weight = "500";
        var weightCurrency = "gram";
        var count = 1;
        $.ajax({
            url: "http://www.zakoola.com/order/GetCalculatedPrice",
            type: "Post",
            data: { Origin: origin, Price: price, Currency: currency, Weight: weight, WeightCurrency: weightCurrency, Count: count }
            })
            .done(function (res) {
                $("#price").html(res);
            });
    });
});

I have a h1 tag with the id of #price in the html. Besides, instead of changing the h1 text I tried alert() to show the res value, but it doesn't work. It seems that response function is never called but I can see the response value in the inspector.

enter image description here

UPDATE 1: Console says Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.zakoola.com/order/GetCalculatedPrice. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). and .fail function is being called with the following return: {"readyState":0,"status":0,"statusText":"error"}

UPDATE 2: Only Firefox is showing the response payload correctly. Edge & IE aren't.

Solution

  • Considering the update, you should add Access-Control-Allow-Origin header in the server you are performing the request. From MDN

    The Access-Control-Allow-Origin response header indicates whether the response can be shared with resources with the given origin.

    in that header you should set your origin (http://example.com) or *.

    If you can't modify backend headers, you can't perform ajax requests in this way.

    About browser compatibility see this, then, your Firefox is probably less than 3.5