Calling asmx web service using JQuery with parameters causes 500 error

Question

I have a simple enough web service:

        [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
        [WebMethod]
        public string GetToken(string a)
        {
        }

And I'm calling it client side using JQuery:

    $.ajax({
        post: 'GET',
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        url: '../url/GetToken',
        data: "{'a':'test'}",
        success: function (data) {
        },
        error: function (a, b, c) {
        }
    });

The call always fails and the error returned is 500 Internal Server Error. I have placed a breakpoint inside the web service, and the code isn't being reached at all. When I modify the web service to take no arguments at all (and remove the data element from the JQuery call) the call succeeds. I have played around with different ways to pass the data element; I've passed a JSON object (no quotes), and I've removed the quotes from around the a argument. None of it works.

Edit:

Using Fiddler I have determined that the actual error causing the 500 is "Invalid web service call, missing value for parameter".

Edit 2:

Passing data this way works:

data: "a='test'"

I have no idea why. Any ideas?

Solution 1

Haven't tested this, but in your code snippet you have post: 'GET' rather than type: 'GET'. That may be causing the server to reject the contentType as json (which is why your data isn't being serialized properly).

Solution 2

You could use a tool like Fidler to check the response you are getting back. Most likely there is an error page being returned, but since it is a jquery ajax call you are not seeing it.

Solution 3

I couldn't use the GET, had to use POST as type, and my web service is in the same directory, but this worked:

    $.ajax({
        type: 'POST',
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        url: 'url.asmx/GetToken',
        data: "{'a':'test'}",
        success: function(data) {
            alert("Success");
        },
        error: function(a) {
            alert(a.responseText);
        }
    });