JSONデータをjqueryダイアログに表示する方法

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