86721


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

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

[code]

    <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>
    
[/code]

[code]

    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;
        }
    
    }
    
[/code]

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

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

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


CC BY-SA 4.0
2022-03-06T12:00:35.210
86718
2022-03-07T08:57:28.050
51714
question
javascript java html spring-boot
Spring Boot、Spring MVC の文字列やJsonを返すContlollerを直接タグから呼び出してHTML上に表示する方法はありますでしょうか

[code]

    <!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>
    
[/code]

大枠としては、概ね一般的なJavaScript/HTMLの範囲に収まる話かなと考えます。  
JavaScriptの [Fetch
API](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch)
を利用して Spring MVC で用意したエンドポイントを非同期で呼ぶ、というのが処理の流れになるでしょう。

細かい部分としては、Spring MVC(&
Thymeleaf)特有の話として、JavaScript部分も[テンプレート処理](https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html#javascript%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E5%87%A6%E7%90%86)できる、ということが挙げられれます。


CC BY-SA 4.0
2022-03-07T02:29:48.590
86721
2022-03-07T08:57:28.050
2022-03-07T08:57:28.050
2808
2808
86718
answer