Frustrated Json Response

Question

So here is my problem. I am using jquery $ .ajax to pass a series of values ​​to a web method. The web method takes values, creates an object, and then sends it back as json to the calling page. Once I get the answer, I cannot access the answer and display it.

Can someone explain what I need to do to make this work?

jquery script:

$(document).ready(function() { $("#create").click(function() { var name = $('#name').val(); var company = $('#company').val(); var location = $('#location').val(); var phonenumber = $('#phonenumber').val(); var country = $('#country').val(); $.ajax({ type: "POST", url: "WebService.asmx/MakeEmployee", data: "{name:'" + name + "',company:'" + company + "',location:'" + location + "',phonenumber:'" + phonenumber + "',country:'" + country + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { AjaxSucceeded(msg.d); } }); }); function AjaxSucceeded(data) { //var item = jQuery.parseJSON(data) // this doesn't work for me. $("#response").html( "<ul><li> " + data.Name + "</li><li> " + data.Company + "</li><li> " + data.Address + "</li><li> " + data.Phone + "</li><li> " + data.Country + "</ul> " ); }; }); 

Web method:

 [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public string MakeEmployee(string name, string company, string location, string phoneNumber, string country) { Employee e = new Employee(name, company, location, phoneNumber, country); return new JavaScriptSerializer().Serialize(e); } 

And the answer I'm returning:

 {"d":"\"Name\":\"bob\", \"Company\":\"google\", \"Address\":\"home\", \"Phone\":\"123\", \"Country\":\"usa\"}"} 

Here is what I think I should return:

 {"Name":"bob", "Company":"google", "Address":"home", "Phone":"123", "Country":"usa"} 

The error I get after re-rendering the pages is this:

 •undefined •undefined •undefined •undefined •undefined 

Answer 1

Your answer will already be parsed as JSON, so it is already an object ... there is no need to parse it again, just use it directly, for example:

 function AjaxSucceeded(data) { $("#response").html( "<ul><li> " + data.Name + "</li><li> " + data.Company + "</li><li> " + data.Address + "</li><li> " + data.Phone + "</li><li> " + data.Country + "</ul> " ); } 

A wrapper { d: ... } added by ASP.Net, this is normal behavior. After that, your problem is an element that does not return correctly, you need to return an object, not a string from ASP.Net, preferably this:

 [WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)] public Employee MakeEmployee(string name, string company, string location, string phoneNumber, string country) { return new Employee(name, company, location, phoneNumber, country); } 

... where Employee has the properties you want on the JavaScript side. Let ASP.Net handle serialization here, instead of doing it directly, you get a cleaner answer in general.

Answer 2

Start by cleaning your service method. You really don't need this constructor and all these properties. You already have an Employee type, so use it:

 [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public Employee MakeEmployee(Employee e) { // Maybe do something more useful here with this employee // like raise his salary return e; } 

And then clear your javascript:

 $.ajax({ type: 'POST', url: 'WebService.asmx/MakeEmployee', data: JSON.stringify({ // All those correspond to Employee properties you would like to pass Name: $('#name').val(), Company: $('#company').val(), Location: $('#location').val(), PhoneNumber: $('#phonenumber').val(), Country: $('#country').val() }), contentType: 'application/json; charset=utf-8', dataType: 'json', success: function(msg) { // msg.d is gonna be the returned employee AjaxSucceeded(msg.d); } }); 

Answer 3

Try using this ajax initaliazer function for asp.net ajax. It sets most of the defaults, so you only need to specify url / params Just call the document.ready () function first, and then your calls.

 function jqueryInit() { $.ajaxSetup({ type: "POST", contentType: "application/json; charset=utf-8", data: "{}", dataFilter: function (data) { var msg; if (typeof (JSON) !== 'undefined' && typeof (JSON.parse) === 'function') msg = JSON.parse(data); else msg = eval('(' + data + ')'); if (msg.hasOwnProperty('d')) return msg.d; else return msg; } }); 

}