Calling ASP.NET ASMX Web Service from jQuery

Question

I am trying to call an ASMX from jQuery using JSON and get a SOAP error response.

What am I doing wrong?!

This is my jQuery call:

 $.ajax({
 type: "POST",
 url: '/Services/TeamPerson.asmx',
 contentType: "application/json; charset=utf-8",
 data: {'active':false, 'team_id':team_id, 'player_id':player_id},
 dataType: "json",
 success: function(msg) {
 alert(msg);
 },
 error: function(xhr, msg) { alert(msg + '\n' + xhr.responseText); }
 }); 

This is my web service:

[WebService(Namespace = "http://tempuri.org/")]
 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
 [ToolboxItem(false)]
 [ScriptService]
 public class TeamPerson : WebService
 {
 [WebMethod]
 [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
 public void SetPlayerStatus(bool active, ulong team_id, ulong player_id)
 {
 // blah blah
 }
 }

I get a nasty SOAP error back:

<?xml version="1.0" encoding="utf-8"?><soap:Envelope xmlns:soap="http://www.w3.org/2003/05/soap-envelope" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<soap:Body><soap:Fault><soap:Code>
 <soap:Value>soap:Receiver</soap:Value></soap:Code>
 <soap:Reason><soap:Text xml:lang="en">
 System.Web.Services.Protocols.SoapException: Server was unable to process request. ---&gt; 
 System.Xml.XmlException: Data at the root level is invalid. Line 1, position 1. 
 at System.Xml.XmlTextReaderImpl.Throw(Exception e) 
 at System.Xml.XmlTextReaderImpl.Throw(String res, String arg) 
 at System.Xml.XmlTextReaderImpl.ParseRootLevelWhitespace() 
 at System.Xml.XmlTextReaderImpl.ParseDocumentContent() 
 at System.Xml.XmlTextReaderImpl.Read() 
 at System.Xml.XmlTextReader.Read() 
 at System.Web.Services.Protocols.SoapServerProtocol.SoapEnvelopeReader.Read() 
 at System.Xml.XmlReader.MoveToContent() 
 at System.Web.Services.Protocols.SoapServerProtocol.SoapEnvelopeReader.MoveToContent() 
 at System.Web.Services.Protocols.SoapServerProtocolHelper.GetRequestElement() 
 at System.Web.Services.Protocols.Soap12ServerProtocolHelper.RouteRequest() 
 at System.Web.Services.Protocols.SoapServerProtocol.RouteRequest(SoapServerMessage message) 
 at System.Web.Services.Protocols.SoapServerProtocol.Initialize()
 at System.Web.Services.Protocols.ServerProtocol.SetContext(Type type, HttpContext context, HttpRequest request, HttpResponse response)
 at System.Web.Services.Protocols.ServerProtocolFactory.Create(Type type, HttpContext context, HttpRequest request, HttpResponse response, Boolean&amp; abortProcessing)
 --- End of inner exception stack trace ---</soap:Text></soap:Reason><soap:Detail /></soap:Fault></soap:Body></soap:Envelope>

I can hit /Services/TeamPerson.asmx via my browser and the web method works fine. I also have the following defined in web.config:

<httpHandlers>
 <remove verb="*" path="*.asmx"/>
 <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
 <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
 <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false"/>
 <add verb="GET,HEAD,POST" path="TinyMCEHandler.aspx" type="Moxiecode.TinyMCE.Web.HttpHandler,Moxiecode.TinyMCE" />
 </httpHandlers>
 <httpModules>
 <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
 </httpModules>

Answer 1

You are not defining which method to call on the service. Try changing your JQuery line url: '/Services/TeamPerson.asmx', to url: '/Services/TeamPerson.asmx/SetPlayerStatus',

• Mark Richman: That made a big difference, thanks! Now I'm just getting this error: {"Message":"Invalid JSON primitive: active.","StackTrace":" at ... Am I passing the data {} params in wrong?
• Mark Richman: Ah! i didn't realize data needed to be a quoted string param. This worked: data: "{'active':'false', 'team_id':" + team_id + ", 'player_id':" + player_id + "}",

Answer 2

Perhaps it's the web method missing in the URL, as well as the parameters.

var teamID = 123;
var playerID = 456;
var active = true;
var webMethod = 'http://foo.net/TeamPerson.asmx/SetPlayerStatus'
var parameters = "{'active':'" + active + 
 "','team_id':'" + teamID + 
 "','player_id':'" + playerID + "'}"
$.ajax({
 type: "POST",
 url: webMethod,
 data: parameters,
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function(msg) { 
 alert('all good');
 },
 error: function(e){
 alert('err');
 }
});

• Alfred Severo: Its old, i know, but.... why you do not use JSON.stringify(parameters) in the "data" parameter?