Как отобразить данные JSON в диалоговом окне jquery

#javascript #java #json #ajax #spring

#javascript #java #json #ajax #весна

Вопрос:

У меня есть вызов ajax, который отправляет данные на контроллер. Контроллер возвращает объект JSON, содержащий пользовательский объект. В моей функции успеха я хочу открыть диалоговое окно и отобразить информацию пользователя в диалоговом окне.

 $.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){			        
			$("#view-user").removeClass("hidden");
			$("#view-user").dialog(dialogOpts);
			$("#view-user").dialog("open");
					
		}
					
});//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);
    }
  

Я довольно новичок в spring, поэтому, пожалуйста, потерпите меня.
Код работает нормально. Я успешно возвращаю объект json обратно в JavaScript. Я борюсь с этой частью; Я хочу отобразить данные пользователя в #view-user div. #просмотр-пользовательский div отображается внутри диалогового окна. Диалоговое окно также работает, но оно пустое, потому что я не знаю, как отобразить информацию внутри него. Есть ли способ использовать объект json с сервера для отображения моих данных таким образом в диалоговом окне?

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

Комментарии:

1. какой шаблон вы используете для просмотра?

Ответ №1:

Весной вместо отправки объекта json вы должны выполнять:

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

Spring преобразует объект в json. Сказав это в вашем ajax, ответом будет ваш объект json.

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

    }
  

Посмотрите на этот пример введите описание ссылки здесь

Ответ №2:

Контроллер

 @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>
  

Комментарии:

1. Спасибо, это сработало! Однако вместо этого я использовал $(«#email»).text(data.email). $(«#email»).val(data.email) не сработал