JQuery: How to get a simple string from ASP.NET WebAPI using AJAX?

Question

Here is my controller in server:

public class ChatController : ApiController
{
    [HttpGet]
    public HttpResponseMessage HelloWorld()
    {
        string result = "<h1>Hello world! Time is: " + DateTime.Now + "</h1>";
        var resp = new HttpResponseMessage(HttpStatusCode.OK);
        resp.Content = new StringContent(result, Encoding.UTF8, "text/plain");
        return resp;
    }
}

Here is my JavaScript code:

$.ajax({
            type: "GET",
            url: "http://localhost:8080/api/Chat/HelloWorld",
            cache: false,
            contentType: "text/plain",
            success: function (data) {
                alert(data);
            },
            error: function (error) {
                alert('error');
            }
        });

It always shows 'error'. What's wrong? By the way, when I copy the url in browser's address bar, the browser can show the correct message from the web api.

Firebug

Response is empty

`"It always shows 'error'. What's wrong?"` - Well, "error" clearly isn't a very informative error message. What's the actual response from the server to the AJAX call? That may contain more useful information. Also, when you debug this, is an exception thrown server-side? — David, Jun 05 '14 at 09:55
Use also `console.log` in your javascript code like: `console.log(error)` to see what is the error. — Snake Eyes, Jun 05 '14 at 09:57
What error do you get ? Try debugging using firebug ! See what you get in response — Rahul Gupta, Jun 05 '14 at 09:58
what is the result you are getting when trying to reach http://localhost:8080/api/Chat/HelloWorld url? — Lin, Jun 05 '14 at 09:58

score 1 · Answer 1 · edited May 23 '17 at 12:23

Finally solved. It is because of cross domain.

Solution: Add "Access-Control-Allow-Origin： *" to the response header in WebAPI controller.

[HttpGet]
    public HttpResponseMessage HelloWorld()
    {
        string result = "Hello world! Time is: " + DateTime.Now + "";
        var resp = new HttpResponseMessage(HttpStatusCode.OK);

        // add this line to allow cross domain
        resp.Headers.Add("Access-Control-Allow-Origin", "*");

        resp.Content = new StringContent(result, Encoding.UTF8, "text/plain");
        return resp;
    }

See the following posts for details:

ajax problem - 200 OK in firebug but red message with no response body

jQuery AJAX cross domain

score 0 · Answer 2 · edited May 23 '17 at 10:28

0

Try logging the error in your console using this code:

error: function (xhr, ajaxOptions, thrownError) {
    console.log(xhr.statusText); 
}

See here if you can't get the error logging to work.

edited May 23 '17 at 10:28

Community

1
1

answered Jun 05 '14 at 10:24

ahb

138
11

It outputs a string 'error'. Can it be a cross domain problem? – Zach Jun 05 '14 at 10:29
1

It should give you more than 'error' if it was a cross domain problem you would get something like NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http...' – ahb Jun 05 '14 at 10:41

JQuery: How to get a simple string from ASP.NET WebAPI using AJAX?

2 Answers2