Can't consume ASP.NET Web Service from jQuery

Question

Here's an interesting problem:

I have some jQuery that looks like this:

    $(document).ready(function() {
    $.ajax({
       type: "POST",
       url: "http://localhost:63056/Service1.asmx/PrintOrderRecieptXml",
       data: {"CouponCode":"TESTCODE","Subtotal":14.2600,"ShippingTotal":7.5000,"TaxTotal":0.0000,"GrandTotal":21.7600,"OrderItemCollection":[{"Total":14.2600,"Qty":250}]},
       dataType: "json",
       contentType: "application/json",
       error: function(xhr, msg) { alert(xhr.statusText); }
    });});

Now, the problem I'm having is that it's sending the request, but the web service isn't processing it correctly. In IE, I get an alert box with "Internal Server Error" and with FireFox I get an alert box with nothing in it.

The strange thing is that when I use IE, I do not get an error event in my event log, but with firefox I get (bonus points for figuring out why this is):

"Exception message: Request format is unrecognized for URL unexpectedly ending in '/PrintOrderRecieptXml"

I poked around some and found out that sometimes you have to add:

<webServices>
  <protocols>
    <add name="HttpGet"/>
    <add name="HttpPost" />
    <add name="HttpPostLocalhost"/>

  </protocols>
</webServices>

To your Web.Config, which I did but it did not help. The interesting thing is that the web service works fine with SOAP or sending a query string, but not with JSON.

Any ideas?

Answer 1

asp.net webservices don't return json normally. take a look here: http://stackoverflow.com/questions/325081/json-webservice-in-asp-net

Answer 2

You need to give your input to the data property as a JSON string, not as an object:

$(document).ready(function() {
  $.ajax({
    type: "POST",
    url: "http://localhost:63056/Service1.asmx/PrintOrderRecieptXml",
    data: '{"CouponCode":"TESTCODE","Subtotal":14.2600,"ShippingTotal":7.5000,"TaxTotal":0.0000,"GrandTotal":21.7600,"OrderItemCollection":[{"Total":14.2600,"Qty":250}]}',
    dataType: "json",
    contentType: "application/json",
    error: function(xhr, msg) { alert(xhr.statusText); }
});});

Using jQuery to Consume ASP.NET JSON Web Services has a good explanation of the requirements when talking to ASP.Net Web Services.

Answer 3

Douglas is correct - you need to format the data as a string. Be sure to read all of the posts on the blog that he linked you to. Encosia is a great resource for Ajax and Asp.Net.