0

フロントエンド、Spring初心者のため抽象的で拙い質問となることをお許しください!
(teratailにも投稿しているのですがご回答がつかないため、すみませんがstackoverflowにも投稿させていただきます。)

以下のコードのようにHTMLからContlollerの@RequestMappingに指定したパスを直接記述することで処理を呼び出して画像を表示するようなHTMLがあるとします。

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <p>画像表示</p>
    <img th:src="@{/getImg?name=IMGP12345}" th:width="600">
</body>
</html>
package com.example.demo.app;

import java.io.File;
import java.io.IOException;
import java.nio.file.Files;

import org.springframework.http.HttpEntity;
import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class ImgController {

    @GetMapping("/")
    public String getIndex() {
        return "ImgController";
    }

    @RequestMapping("/getImg")
    @ResponseBody
    public HttpEntity<byte[]> getImg(@RequestParam("name") String fileName){
        File fileImg = new File("img/"+ fileName +".JPG");

        byte[] byteImg = null;
        HttpHeaders headers = null;
        try {
            //バイト列に変換
            byteImg = Files.readAllBytes(fileImg.toPath());
            headers = new HttpHeaders();

            //Responseのヘッダーを作成
            headers.setContentType(MediaType.IMAGE_JPEG);
            headers.setContentLength(byteImg.length);
        }catch(IOException e) {
            return null;
        }
        return new HttpEntity<byte[]>(byteImg,headers);
    }

    @RequestMapping("/getText")
    @ResponseBody
    public String text() {
        String text = "test text";
        return text;
    }

}

このようなニュアンスで非同期的?に画像以外の文字列だったりJsonだったりを例えばタグなどに指定して直接呼び出すようなことって可能でしょうか。例えば上記Javaで簡素に記述しておりますが、textメソッドのような文字列を返すメソッドの@RequestMappingのパスをHTML側(もしくはjsなど?)で指定して画面に表示したりパラメータとして使用したりしたいと思っております。
あくまでも画面に遷移するのではなく表示した画面の中の要素として呼び出すようなイメージです。

ググる力が足りず、こちらへ質問することに至りました。

ご確認・ご教授いただけると幸いです。よろしくお願いいたします。

1 件の回答 1

0
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>Insert title here</title>
  </head>
  <body>
    <p>画像表示</p>
    <img th:src="@{/getImg?name=IMGP12345}" th:width="600" />

    <script th:inline="javascript">
      document.addEventListener("DOMContentLoaded", (event) => {
        const url = /*[[@{/getText}]]*/ "/dummy-url";
        fetch(url)
          .then((resp) => resp.text())
          .then((text) => {
            const div = document.createElement("div");
            div.textContent = text;
            const body = document.getElementsByTagName("body")[0];
            body.insertAdjacentElement("afterbegin", div);
          });
      });
    </script>
  </body>
</html>

大枠としては、概ね一般的なJavaScript/HTMLの範囲に収まる話かなと考えます。
JavaScriptの Fetch API を利用して Spring MVC で用意したエンドポイントを非同期で呼ぶ、というのが処理の流れになるでしょう。

細かい部分としては、Spring MVC(& Thymeleaf)特有の話として、JavaScript部分もテンプレート処理できる、ということが挙げられれます。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。