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

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.