Frustrado con la respuesta de Json

Question

Así que aquí está mi problema. Estoy usando $ .ajax de Jquery para devolver una serie de valores a un método web. El método web toma los valores, crea un objeto y luego lo envía como json a la página de llamada. Una vez que recibo la respuesta, no puedo acceder a la respuesta y mostrar sus valores.

¿Alguien puede explicar lo que tengo que hacer para que esto funcione?

El script jQuery:

$(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> " 
      ); 
     }; 
    }); 

El método web:

[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); 
} 

Y la respuesta que estoy recibiendo de vuelta:

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

Esto es lo que creo que debería estar de vuelta:

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

El error que consigo una vez que las páginas renders de nuevo es la siguiente:

•undefined 
•undefined 
•undefined 
•undefined 
•undefined 

Answer 1

Su respuesta ya se analiza como JSON, por lo que ya es un objeto ... no hay necesidad de analizar de nuevo sólo lo utilizan directamente , de esta manera:

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> " 
    ); 
} 

La envoltura { d: ... } se añade por ASP.Net, eso es un comportamiento normal. Después de que su problema es el elemento no devuelve correctamente, es necesario devolver un objeto no es una cadena de de ASP.Net, preferiblemente esto:

[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); 
} 

... Employee donde tiene las propiedades que desee en el lado de JavaScript. Permita que ASP.Net maneje la serialización aquí en lugar de hacerlo directamente, obtendrá una respuesta más limpia en general.

Answer 2

Comience por limpiar su método de servicio. Realmente no necesitas este constructor y todas esas propiedades. Ya tiene un tipo Employee, a fin de utilizarlo:

[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; 
} 

Y luego limpiar su 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

Trate de usar esta función para initaliazer ajax asp.net ajax. Establece la mayoría de los valores predeterminados por lo que solo debe proporcionar url/params Simplemente llame primero a su función document.ready() y luego a sus llamadas.

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; 
    } 
}); 

}