从 @RestContoller 使用 JavaScript 获取 JSON 数据

huangapple
go评论106阅读模式
英文:

Fetching JSON data from @RestContoller using JavaScript

问题

The HTML页面为何无法加载特定请求的URL并无法从JSON格式中获取数据的问题?

控制器(Controller)代码部分：

  1. @RestController
  2. @RequestMapping("api/reservations")
  3. public class ReservationController {
  5.     private final ReservationService reservationService;
  7.     @Autowired
  8.     public ReservationController(ReservationService reservationService) {
  9.         this.reservationService = reservationService;
  10.     }
  12.     @GetMapping("/all")
  13.     public List<Reservation> showAllReservations() throws SQLException {
  14.         return reservationService.showAllReservations();
  15.     }
  16. }

HTML + JavaScript部分：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Reservations</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       // 从REST控制器获取JSON数据
  11.       fetch("http://localhost:8080/api/reservations/all")
  12.         .then((response) => response.json())
  13.         .then((data) => {
  14.           // 遍历JSON数组中的每个对象
  15.           var formattedData = "";
  17.           data.forEach((item) => {
  18.             formattedData +=
  19.               "<p>Reservation ID: " +
  20.               item.id +
  21.               "</p>" +
  22.               "<p>Customer: " +
  23.               item.customer.name +
  24.               "</p>" +
  25.               "<p>Email: " +
  26.               item.customer.email +
  27.               "</p>" +
  28.               "<p>Check-in Date: " +
  29.               item.dateCheckIn +
  30.               "</p>" +
  31.               "<p>Check-out Date: " +
  32.               item.dateCheckOut +
  33.               "</p>" +
  34.               "<hr>";
  35.           });
  36.           // 使用格式化数据更新HTML容器
  37.           var dataContainer = document.getElementById("data-container");
  38.           dataContainer.innerHTML = formattedData;
  39.         })
  40.         .catch((error) => {
  41.           console.error("Error:", error);
  42.         });
  43.     </script>
  44.     <div id="data-container"></div>
  45.   </body>
  46. </html>

您已经检查了URL的正确性，控制器看起来也没问题，文件位于不同的文件夹中（模板用于.html文件，src>java>package用于控制器）。

英文:

Why the html page doesn't load on specific requested URL and doesn't fetching data from JSON format?
Result of opening api/reservations/all

Controller:

  1. @RestController
  2. @RequestMapping(&quot;api/reservations&quot;)
  3. public class ReservationController {
  5.     private final ReservationService reservationService;
  7.     @Autowired
  8.     public ReservationController(ReservationService reservationService) {
  9.         this.reservationService = reservationService;
  10.     }
  11.  @GetMapping(&quot;/all&quot;)
  12.     public List&lt;Reservation&gt; showAllReservations() throws SQLException {
  13.         return reservationService.showAllReservations();
  14.     }
  15. }

HTML + Javascript

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3.   &lt;head&gt;
  4.     &lt;meta charset=&quot;utf-8&quot; /&gt;
  5.     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
  6.     &lt;title&gt;Reservations&lt;/title&gt;
  7.   &lt;/head&gt;
  8.   &lt;body&gt;
  9.     &lt;script&gt;
  10.       // Fetch JSON data from REST controller
  11.       fetch(&quot;http://localhost:8080/api/reservations/all&quot;)
  12.         .then((response) =&gt; response.json())
  13.         .then((data) =&gt; {
  14.           // Iterate over each object in the JSON array
  15.           var formattedData = &quot;&quot;;
  17.           data.forEach((item) =&gt; {
  18.             formattedData +=
  19.               &quot;&lt;p&gt;Reservation ID: &quot; +
  20.               item.id +
  21.               &quot;&lt;/p&gt;&quot; +
  22.               &quot;&lt;p&gt;Customer: &quot; +
  23.               item.customer.name +
  24.               &quot;&lt;/p&gt;&quot; +
  25.               &quot;&lt;p&gt;Email: &quot; +
  26.               item.customer.email +
  27.               &quot;&lt;/p&gt;&quot; +
  28.               &quot;&lt;p&gt;Check-in Date: &quot; +
  29.               item.dateCheckIn +
  30.               &quot;&lt;/p&gt;&quot; +
  31.               &quot;&lt;p&gt;Check-out Date: &quot; +
  32.               item.dateCheckOut +
  33.               &quot;&lt;/p&gt;&quot; +
  34.               &quot;&lt;hr&gt;&quot;; 
  35.           });
  36.           // Update the HTML container with the formatted data
  37.           var dataContainer = document.getElementById(&quot;data-container&quot;);
  38.           dataContainer.innerHTML = formattedData;
  39.         })
  40.         .catch((error) =&gt; {
  41.           console.error(&quot;Error:&quot;, error);
  42.         });
  43.     &lt;/script&gt;
  44.     &lt;div id=&quot;data-container&quot;&gt;&lt;/div&gt;
  45.   &lt;/body&gt;
  46. &lt;/html&gt;

I checked URL correctness, controller seems fine, the files locates in different folders (templates for .html and src>java>package for controller).

答案1

得分: 0

问题出在粗心大意上，点击按钮将我带到了api/reservation/all而不是reservations.html，所以JavaScript无法运行，也无法显示结果。感谢你的答案。

英文:

The problem was inattention, clicking on the button took me to api/reservation/all instead of reservations.html and so the javascript didn't work and didn't show the result. Thanks for your answers.

huangapple
  • 本文由 发表于 2023年5月23日 01:50:01
  • 转载请务必保留本文链接：https://go.coder-hub.com/76308762.html
  • javascript
  • json
  • spring
  • spring-boot
  • spring-restcontroller
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定