2010-12-22 16 views
6

여기 내 문제가 있습니다. Jquery의 $ .ajax를 사용하여 일련의 값을 웹 메서드에 전달합니다. 웹 메서드는 값을 가져 와서 객체를 만든 다음 json으로 다시 호출 페이지로 보냅니다. 응답을 받으면 응답에 액세스 할 수없고 값을 표시 할 수 없습니다.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> " 
      ); 
     }; 
    }); 

웹 방법 :

[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 
+2

내가 당신이 여기 일을하는지 확실히 길을하지했지만, 나는'JavaScriptSerializer'의 사용 치우는 시도 할 것입니다. 그냥'Employee' 클래스를 반환하면 프레임 워크가 Json으로 변환해야합니다. – CodingGorilla

+0

당신이 돈에있어. JavaScriptSerializer() 부분은 json 응답으로 펑키 한 작업을 수행하고있었습니다. 힌트를 가져 주셔서 감사합니다! – Chris

답변

2
귀하의 응답이 이미 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에 의해 추가, 즉 정상적인 동작입니다. Employee는 속성이 곳

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

... 당신이 원하는 : 문제가있는 요소가 제대로 반환되지 후, 바람직하게는이, ASP.Net에서 객체하지 않는 문자열을 반환해야 자바 스크립트 측면. ASP.Net이 직접 직렬화를 처리하는 대신 여기에서 직렬화를 처리하게하면 전반적으로보다 명확한 응답을 얻을 수 있습니다.

+1

새 JavaScriptSerializer()를 사용할 필요가 없습니다. Serialize (e); 웹 메소드의 일부. 일단 내가 그것을 꺼내서 객체 폼을 서버에 반환하면 다른 모든 것들이 제자리에 떨어졌습니다. – Chris

1

서비스 방법을 정리하는 것으로 시작하십시오. 이 생성자와 모든 속성은 실제로 필요하지 않습니다.

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

을 다음 자바 스크립트를 청소 : 당신은 이미 Employee 유형이 있으므로 그것을 사용

$.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); 
    } 
}); 
+0

정확히 "JSON.stringify"는 무엇입니까? – Chris

+1

@Chris는 객체를'{Name : 'foo', Company : 'bar'}'와 같은 JSON 문자열로 바꾸고이 문자열을 웹 메서드에 전달합니다. 최신 브라우저는 내장되어 있지만 오래된 브라우저는 http://www.json.org/js.html에서 다운로드 할 수 있습니다. 속성을 적절하게 인코딩하는 번거 로움을 피할 수 있습니다. –

+0

아주 좋습니다. 나는 그 하나를 전에 보지 못했습니다. 코드를 수정하고 그것이 얼마나 잘 작동하는지 살펴 보겠습니다. 정보 주셔서 감사합니다! – Chris

0

은 asp.net 아약스에 대한 기능 initaliazer이 아약스를 사용해보십시오. 대부분의 기본값을 설정하므로 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; 
    } 
}); 

}

관련 문제