CODEWITHSUNDEEP
jqueryajaxasp.net-web-api
Neil
Neil

Reputation: 2749

jQuery ajax call to WebApi works on IE but not Firefox, Chrome or Opera

I have a test web page for calling a WebApi URL and getting a reply. It works as expected in IE, but none of the other browsers.

Here is the jQuery call I make

$(document).ready(function()
{
    jQuery("#cmdCallServiceWithParameter").on("click", function(event)
    {

        $.ajax({
            type: "GET",
            url: "http://localhost:64804/api/Voucher/5",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function ()
            {
                alert("success");
            },
            error: function (jqXHR, textStatus, errorThrown)
            { // Debug the error!!
                alert("error " + textStatus);
                alert("error throw " + errorThrown);
                alert("incoming Text " + jqXHR.responseText);
            }
        })
    })
});

Here is the code in the voucher controller

    // GET api/voucher/5
    public string Get(int id)
    {

        //return JsonConvert.SerializeObject(id, typeof(int), Formatting.Indented, new JsonSerializerSettings());
        return "{\"test\":" + id.ToString() + "}";
    }

IE returns a Success message, but for the other three browsers I get the three alerts in the error function displayed. The only parameter to be set is the textStatus, which is set to 'error'

When I browse to the URL directly (http://localhost:64804/api/Voucher/5) on Firefox and Chrome it shows "{\"test\":5}" in the browser window. IE asks me to download a file named 5.json, and Opera asks me to download a file named 5. Both files just contain the text shown above that appears in the window for Firefox and Chrome

Does anybody have any ideas what the issue could be here, and how I can get it to work in all browsers?

Upvotes: 0

Views: 3660

Answers (3)

Neil
Neil

Reputation: 2749

I've got it working with a combination of the answers from Chris Dixon, Andrei and soderslatt

The main reason I am was getting an error was the datatype in the Ajax call being set to 'json' instead of 'jsonp'.

I changed this, then installed nu-get package WebApiContrib.Formatting.Jsonp on the WebApi side and followed the instructions here: https://github.com/WebApiContrib/WebApiContrib.Formatting.Jsonp

I also updated my controller method to return an object as suggested by Chris Dixon

    // GET api/voucher/5
    public Voucher Get(int id)
    {
        Voucher voucher = new Voucher();
        voucher.VoucherNumber = id;
        return voucher;
    }

Upvotes: 0

Chris Dixon
Chris Dixon

Reputation: 9167

At a guess, it's the Web API that's serializing the results differently as you're not using Web API in the way it was intended to be used.

Ideally you should be returning objects back.

Try this:

public object Get(int id)
{
    return new { test = id.ToString(); } 
    // Creates a new anonymous object, rather than a string, but this should,
    // practically, be an object such as "TestObject" or whatever.
}

So, ideally, this:

public TestObject() 
{
    public int id { get; set; }
}

public TestObject Get(int id)
{
    TestObject testing = new TestObject { id = id };

    return testing;
}

** Edit **

Looking at your ports, as others have said, it'll be a cross-domain issue. Use JSONP to get around this. However, this post is still relevant when moving forward with returning data from the WebAPI.

Upvotes: 1

Andrei
Andrei

Reputation: 56726

Most likely you are experiencing effect of same origin policy. In short - it is impossible to make ajax calls between different sites (site here is defined as combination of scheme, hostname, and port number - the latter is different in your case).

To resolve this you can use a technique JSONP. Here is a SO thread describing how one can use JSONP with WebAPI.

Upvotes: 2

Related Questions