如何在网站上显示 AJAX 响应数据

Question

我正在编写一个 Spring Boot 应用程序，其中我有一个网站，其中有一个包含几个电脑游戏的子菜单。当我单击此子菜单中的某个位置时，我希望服务器发送该游戏的图像（图像是指图像的路径）作为响应，并且在响应返回到我在网站上的 JS 后，我想要在网站上显示。我已经做的是向服务器发送请求，并根据请求数据选择图像。我不知道如何发送回复并在我的网站上使用它。
这是我的代码：

爪哇：

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

Answer 1

我将添加一个新方法，该方法仅返回您的 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)
})