jQuery AJAX response always returns nothing

Question

The following code returns a blank response no matter whether or not the Function exists, or even the Web Service file entirely:

$.ajax({
    url: "/ws.asmx/HelloWorld"
    , type: "POST"
    , contentType: 'application/json; charset=utf-8'
    , data: '{ FileName: "' + filename + '" }'
    , dataType: 'json'
    , success: function (data) {

    }
});

Why is this?

Also, might be worth noting, $.load() works fine!

Answer 1

Your error is that you try to construct JSON data manually and do this in the wrong way:

'{ FileName: "' + filename + '" }'

You should fix the code at least to the following

'{ "FileName": "' + filename + '" }'

because correspond to the JSON specification the property names must be also double quoted.

Next problem can you has if the filename has some special characters. For example, in case of

var filename = '"C:\\Program Files"'; // the '\' must be escaped in the string literal

you should has as the data the corresponding JSON string

'{ "FileName": "\\"C:\\\\Program Files\\"" }'

as the corresponding JSON data because of '\' and '"' must be escaped. It looks dificult. So I stricly recommend you to construct JSON strings with respect of JSON.stringify function from the json2.js. Then the code will be

$.ajax({
    type: "POST",
    url: "ws.asmx/HelloWorld",
    data: JSON.stringify({ FileName: filename }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        alert(data.d);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert("Error Occured!" + " | " + XMLHttpRequest.responseText +
               " | " + textStatus + " | " +  errorThrown);
    }
});

which is simple and clear enough. The next advantage of the usage JSON.stringify is that the most modern web browsers has native support of the function and the function work very quickly.

By the way in case of the usage of JSON.stringify you can easy call web service methd having very complex data structures (classes) as the parameters and not only strings.

UPDATED: One more remrk to reduce possible misunderstanding. It you later deceide to use HTTP GET instead of HTTP POST to call the web method you will have to change the data parameter from

JSON.stringify({ FileName: filename })

to

{ FileName: JSON.stringify(filename) }

UPDATED 2: You can download this Visual Studio 2010 project which I used to test all before I posted my answer. I included as "Web-3.5.config" the web.config for .NET 3.5. All different commented data values included in the default.htm work. If you want make tests with HTTP GET you should uncomment the section in web.config which allows HttpGet and use ScriptMethod having UseHttpGet = true. All the lines are included in the demo as comments.

Answer 2

just to try use:

$.getJSON("/ws.asmx/HelloWorld", function(data){
   alert(data);
});

Check if you get the data back.

Answer 3

Use AJAX-Enabled Web Service

Answer 4

Make sure you have loaded the jquery.js file properly.

Answer 5

Does the service return a value? If not, it will just POST and not give you back anything, because there is no data to see...

Answer 6

If you want to watch for errors, you can add an error callback

$.ajax({
    url: "/ws.asmx/HelloWorld"
    , type: "POST"
    , contentType: 'application/json; charset=utf-8'
    , data: '{ FileName: "' + filename + '" }'
    , dataType: 'json'
    , success: function (data) {

    }
    , error: function (a, b, c) {

    }
});

From jQuery:

error(jqXHR, textStatus, errorThrown)Function 

A function to be called if the request fails. The function receives

three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a string describing the type of error that occurred and an optional exception object, if one occurred. Possible values for the second argument (besides null) are "timeout", "error", "abort", and "parsererror". This is an Ajax Event. As of jQuery 1.5, the error setting can accept an array of functions. Each function will be called in turn. Note: This handler is not called for cross-domain script and JSONP requests.

Answer 7

I read somewhere that the contentType header for POST must be:

  xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

and I use it blindly: it's always worked.

-- pete