jquery 대화 상자에서 JSON 데이터를 표시하는 방법

Question

데이터를 컨트롤러로 보내는 ajax 호출이 있습니다. 컨트롤러는 사용자 객체를 포함하는 JSON 객체를 반환합니다. 내 성공 함수에서 대화 상자를 열고 대화 상자에 사용자의 정보를 표시하려고합니다.

이

$.ajax({ 
 
\t \t type: "get", 
 
\t \t url: $(".user-details-link").attr("href"), 
 
\t \t dataType: "json", 
 
\t \t cache: true, 
 
\t \t error: function(jqXHr,textStatus, errorThrown) { 
 
\t \t \t  alert("Error opening dialog:\n" + errorThrown); 
 
\t \t }, 
 
\t \t success: function(data){ \t \t \t   
 
\t \t \t $("#view-user").removeClass("hidden"); 
 
\t \t \t $("#view-user").dialog(dialogOpts); 
 
\t \t \t $("#view-user").dialog("open"); 
 
\t \t \t \t \t 
 
\t \t } 
 
\t \t \t \t \t 
 
});//end ajax

는 JSON 객체

@RequestMapping(value="/admin/user/detail", method=RequestMethod.GET) 
public @ResponseBody void userDetail(HttpServletRequest request, 
     HttpServletResponse response, @RequestParam("id") int id) 
       throws IOException, JSONException, ServletException{ 
    MMUser user = iUserService.getUser(id); 
    JSONObject jsonObject = new JSONObject(); 

    jsonObject.put("user", user); 

    response.setContentType("application/json"); 
    response.getWriter().println(jsonObject); 
    } 

나와 함께 곰하시기 바랍니다 그래서 봄 상당히 새로운 오전을 반환하는 코드입니다. 코드가 정상적으로 작동합니다. json 객체를 JavaScript로 다시 반환하고 있습니다. 나는이 부분과 힘들어하고있다. # view-user div에 사용자의 세부 정보를 표시하고 싶습니다. # view-user div가 대화 상자 안에 표시됩니다. 대화 상자도 작동하지만 내부 정보를 표시하는 방법을 모르기 때문에 비어 있습니다. 이 대화 상자에서 내 데이터를 표시하기 위해 서버의 json 객체를 사용하는 방법이 있습니까? 대신 JSON 개체를 다시 보내는 봄

Answer 1

컨트롤러

@RequestMapping(value="/admin/user/detail", method=RequestMethod.GET) 
public @ResponseBody MMUser userDetail(HttpServletRequest request, 
    HttpServletResponse response, @RequestParam("id") int id) 
      throws IOException, JSONException, ServletException{ 
    MMUser user = iUserService.getUser(id); 
    return user; 
} 

JS

$.ajax({ 
    type: "get", 
    url: $(".user-details-link").attr("href"), 
    dataType: "json", 
    cache: true, 
    error: function(jqXHr,textStatus, errorThrown) { 
      alert("Error opening dialog:\n" + errorThrown); 
    }, 
    success: function(data){      
     $("#email").val(data.email); 
     $("#firstName").val(data.firstName); 
     $("#lastName").val(data.lastName); 
     $("#view-user").removeClass("hidden"); 
     $("#view-user").dialog(dialogOpts); 
     $("#view-user").dialog("open"); 

    } 

});//end ajax 

HTML

<div id="view-user"> 
<table> 
<tr> 
    <td> 
    <span id="email"></span> 
    </td> 
    <td> 
    <span id="firstName" ></span> 
    </td> 
    <td> 
    <span id="lastName"></span> 
    </td> 
</tr> 

012에서보세요

Answer 2

<div id="view-user"> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     ${user.getEmail()} 
 
     </td> 
 
     <td> 
 
     ${user.getFirstName()} 
 
     </td> 
 
     <td> 
 
     ${user.getLastName()} 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

, yuo는 일을해야한다 :

MMUser user = iUserService.getUser(id); 
return user; 

봄이 JSON으로 객체를 변환합니다. 귀하의 아약스에서 응답이 귀하의 json 객체라고 말한 것입니다.

success: function(data){     
       console.log(data.email); 

    } 

이 예 enter link description here