沮喪與Json響應

Question

所以這是我的問題。我使用Jquery的$ .ajax將一系列值傳回給web方法。 Web方法接受這些值，創建一個對象，然後將其作爲json發送回調用頁面。一旦我得到響應，我無法訪問響應並顯示它的值。

任何人都可以解釋我需要做什麼使這項工作？

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

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

這是我恢復的響應：

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

這就是我想我應該回來：

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

我得到一次頁面錯誤再次渲染是這樣的：

•undefined 
•undefined 
•undefined 
•undefined 
•undefined 

Answer 1

你的反應就已經被解析爲JSON，所以它已經是一個對象......沒有必要再分析它只是直接使用它，像這樣：

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

的{ d: ... }包裝是由ASP.Net增加，這是正常的行爲。之後，你的問題是不正確返回的元素，你需要從ASP.Net返回對象不是串，最好這樣：

[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具有的屬性，你想在JavaScript方面。讓ASP.Net在這裏處理序列化，而不是直接執行，你會得到一個更清晰的響應。

Answer 2

首先清理你的服務方法。你真的不需要這個構造函數和所有這些屬性。你已經有一個Employee類型，所以使用它：

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

然後清理你的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

嘗試使用這個AJAX initaliazer的asp.net AJAX功能。它設置了大多數默認設置，因此您只需提供url/params 首先調用您的document.ready（）函數，然後調用您的調用。

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

}