Как показать данные ответа AJAX на сайте - PullRequest
Новая
       7

Как показать данные ответа AJAX на сайте

2 голосов
/ 06 мая 2020

Я пишу приложение Spring Boot, в котором у меня есть веб-сайт с подменю с несколькими компьютерными играми. Когда я нажимаю на позицию в этом подменю, я хочу, чтобы сервер отправлял изображение (под изображением я имею в виду путь к изображению) этой игры в качестве ответа, и после того, как ответ вернется на мой JS на веб-сайте, Я хочу показать это на сайте. Что я уже сделал, так это отправил запрос на сервер и выбрал изображение на основе данных запроса. Я не знаю, как отправить ответ и использовать его на своем веб-сайте.
Вот мой код:

Java: 

@RequestMapping("/change-game")
public String changeGame(HttpServletRequest request, @RequestBody GameData data){
    File file;
    String game = data.getName();
    switch (game) {
        //some code which actually works. I removed it to save space
    }
    request.setAttribute("gameIcon", file);
    return "index";
}

JavaScript: 

$("#selectGameSubmenu li").click(function(e){
    e.preventDefault();
    var option = $(this).data("option");
    console.log(option + " " + JSON.stringify({"option": option}));
    $.ajax({
        type: "POST",
        url: "http://localhost:8080/change-game",
        data: JSON.stringify({name: option}),
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    });
});

HTML: 

 <img src="${gameIcon}" alt="${altGameIcon}"
             style="width:100px;height:100px" class="gameLogoCenter"/>

1 Ответ

1 голос
/ 06 мая 2020

Я бы добавил новый метод, который возвращает только путь изображения для ваших AJAX вызовов для использования.

Например 

@ResponseBody
@PostMapping("/change-game-icon")
public String changeGameIcon(@RequestBody GameData data) {
    File file;
    String game = data.getName();
    switch (game) {
        //some code which actually works. I removed it to save space
    }
    return file.toString();
}

и в вашем JS

$.ajax({
  url: '/change-game-icon',
  method: 'post', // or "type" if your jQuery is really old
  data: JSON.stringify({name: option}),
  dataType: 'text',
  contentType: 'application/json'
}).done(iconPath => {
  $('img.gameLogoCenter').prop('src', iconPath)
})
...