Calling Json Web Service using AJAX in ASP.NET

Question

Any help would be greatly appreciated.

The overview: I have one .Net solution, 2 projects. One hosts a web service, one calls the web service. The web service accepts an integer id argument and returns a person name formatted as JSON.
Here is the raw output straight out of Fiddler:

HTTP/1.1 200 OK
Server: ASP.NET Development Server/10.0.0.0
Date: 2013年10月16日 16:51:18 GMT
X-AspNet-Version: 4.0.30319
Cache-Control: private, max-age=0
Content-Type: application/json; charset=utf-8
Content-Length: 35
Connection: Close
{"PersonName":"Jane Doe"}

Here's the basic Web service set up:

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class PeopleWebService : System.Web.Services.WebService
{
 [WebMethod]
 [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
 public void GetUserName(int ID)
 {
 try
 {
 using (EformTstEntities db = new EformTstEntities())
 {
 JavaScriptSerializer js = new JavaScriptSerializer();
 var jsonData = new
 {
 PersonName = (from i in db.People where i.ID == ID select i.FirstName + " " + i.LastName).FirstOrDefault()
 };
 string retJSON = js.Serialize(jsonData);
 Context.Response.Write(retJSON);
 }
 }
 catch (Exception ex)
 {
 Context.Response.Write(string.Format("[ERROR: {0}]", ex.Message));
 }
 }
}

So, I assume the web service is working fine and not a problem...

Here is my basic call to the web service via ajax. At this time I am not trying to do anything with the output, I'm just trying to call the web service without an error. On the call I continually drop into the error handling function. Any ideas?

<script type="text/javascript">
 function getUserName() {
 var id = $("#UserID").val();
 $.ajax({
 url: "http://localhost:1211/Services/PeopleWebService.asmx/GetUserName",
 type: "POST",
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 data: "{ID:'" + id + "'}",
 success: function (msg) {
 alert("this worked");
 }, 
 error: function () {
 alert("this error");
 }
 });
 return false;
 }
 </script>

• ramsey_tm: Friendly tip change you error function to this and it should give you more information on the specific error that is occuring: error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); }

Answer 1

try with

data: "{'ID':'" + id + "'}",

and also change the error method to see the error details like below

error: function (xhr, ajaxOptions, thrownError) {
 alert(xhr.status);
 alert(xhr.responseText);
 alert(thrownError);
}

• user2887262: 200 {"PersonName":"Jane Doe"}{"d":null} SyntaxError: Syntax error
• Damith: @user2887262 are you testing on firefox ? then try on other browser