英文:
Fetching JSON data from @RestContoller using JavaScript
问题
The HTML页面为何无法加载特定请求的URL并无法从JSON格式中获取数据的问题?
控制器(Controller)代码部分：
@RestController
@RequestMapping("api/reservations")
public class ReservationController {
private final ReservationService reservationService;
@Autowired
public ReservationController(ReservationService reservationService) {
this.reservationService = reservationService;
}
@GetMapping("/all")
public List<Reservation> showAllReservations() throws SQLException {
return reservationService.showAllReservations();
}
}
HTML + JavaScript部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Reservations</title>
</head>
<body>
<script>
// 从REST控制器获取JSON数据
fetch("http://localhost:8080/api/reservations/all")
.then((response) => response.json())
.then((data) => {
// 遍历JSON数组中的每个对象
var formattedData = "";
data.forEach((item) => {
formattedData +=
"<p>Reservation ID: " +
item.id +
"</p>" +
"<p>Customer: " +
item.customer.name +
"</p>" +
"<p>Email: " +
item.customer.email +
"</p>" +
"<p>Check-in Date: " +
item.dateCheckIn +
"</p>" +
"<p>Check-out Date: " +
item.dateCheckOut +
"</p>" +
"<hr>";
});
// 使用格式化数据更新HTML容器
var dataContainer = document.getElementById("data-container");
dataContainer.innerHTML = formattedData;
})
.catch((error) => {
console.error("Error:", error);
});
</script>
<div id="data-container"></div>
</body>
</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:
@RestController
@RequestMapping("api/reservations")
public class ReservationController {
private final ReservationService reservationService;
@Autowired
public ReservationController(ReservationService reservationService) {
this.reservationService = reservationService;
}
@GetMapping("/all")
public List<Reservation> showAllReservations() throws SQLException {
return reservationService.showAllReservations();
}
}
HTML + Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Reservations</title>
</head>
<body>
<script>
// Fetch JSON data from REST controller
fetch("http://localhost:8080/api/reservations/all")
.then((response) => response.json())
.then((data) => {
// Iterate over each object in the JSON array
var formattedData = "";
data.forEach((item) => {
formattedData +=
"<p>Reservation ID: " +
item.id +
"</p>" +
"<p>Customer: " +
item.customer.name +
"</p>" +
"<p>Email: " +
item.customer.email +
"</p>" +
"<p>Check-in Date: " +
item.dateCheckIn +
"</p>" +
"<p>Check-out Date: " +
item.dateCheckOut +
"</p>" +
"<hr>";
});
// Update the HTML container with the formatted data
var dataContainer = document.getElementById("data-container");
dataContainer.innerHTML = formattedData;
})
.catch((error) => {
console.error("Error:", error);
});
</script>
<div id="data-container"></div>
</body>
</html>
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论