javascript - Spring MVC - 重新加载相同的 ModelAndView 但使用新的/不同的数据
问题描述
尝试在 Spring 中学习 MVC 的基础知识(我只使用过 Spring 来构建 REST API)并且我无法理解如何将新数据返回到同一个视图,似乎我有很多重复的代码和HTML 页面完全依赖于 th:if 语句...
发出 POST 请求然后使用新的/更新的数据加载相同的 ModelAndView 的最佳方法是什么?下面的代码:
控制器:
@Controller
public class ColorController {
private ColorService colorService;
@Autowired
public ColorController(ColorService colorService) {
this.colorService = colorService;
}
//homepage
@GetMapping("/")
public ModelAndView home(ModelAndView welcomeMAV) {
welcomeMAV.setViewName("welcome");
welcomeMAV.addObject("message", "What is your RGB color?");
welcomeMAV.addObject("rgbcolor", new RGBColour());
welcomeMAV.addObject("hexValue", null);
return welcomeMAV;
}
@PostMapping("/color")
public ModelAndView colorConvert(ModelAndView welcomeMAV, @ModelAttribute RGBColour rgbColour) {
welcomeMAV.setViewName("welcome");
welcomeMAV.addObject("message", "What is your RGB color?");
welcomeMAV.addObject("rgbcolor", new RGBColour());
welcomeMAV.addObject("hexValue", colorService.convertRGBToHex(rgbColour));
return welcomeMAV;
}
}
欢迎.html:
<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:insert="fragments/header.html">
<!-- insert <head> html here -->
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">The NavBar</a>
</nav>
<main role="main" class="container">
<div class="starter-template">
<br />
<br />
<br />
<h1>Bytes and Bits</h1>
<h2>
Convert your colours
</h2>
<hr />
<p th:if="${hexValue == null}" th:text="${message}" th:unless="${message == null}">No message</p>
</div>
<div class="row">
<div class="col-md-6">
<form th:if="${hexValue == null}" action="#" th:action="@{/color}" th:object="${rgbcolor}" method="post">
<p>Red: <input id="red" placeholder="0" class="form-control" type="text" th:field="*{red}" onchange="getRed()" /></p>
<p>Green: <input id="green" placeholder="0" class="form-control" type="text" th:field="*{green}" onchange="getGreen()" /></p>
<p>Blue: <input id="blue" placeholder="0" class="form-control" type="text" th:field="*{blue}" onchange="getBlue()"/></p>
<p><input class="btn btn-primary" type="submit" value="Submit" /> <input class="btn btn-danger" type="reset" value="Reset" /></p>
</form>
<p class="hex-color-text" th:if="${hexValue != null}">The hex value is: <span class="hex-color-text" id="hex-color-text" th:if="${hexValue != null}" th:text="${hexValue}"></span></p>
</div>
<div class="col-md-6">
<div class="color-preview" id="color-preview">
<p class="color-preview-text" id="color-preview-text"></p>
</div>
</div>
</div>
<a class="btn btn-primary" th:if="${hexValue != null}" href="/">Reset</a>
</main>
<!-- /.container -->
<script type="text/javascript" th:src="@{/js/main.js}"></script>
</body>
</html>
解决方案
如果您想在不重新加载的情况下刷新页面,您应该使用 javascript 或 jquery。
现在在您的情况下,一个控制器就足以完成所需的操作。调用同一个控制器并在 dao 层添加一些逻辑。
如果选择了颜色,则将其发送到 jsp,否则返回 null。
您可以使用 mvc(controller,service,dao) 的所有层来有效地完成它,而不是在 jsp 中使用逻辑
推荐阅读
- python - 在使用 Tesserocr -Python 进行表检测时需要帮助
- postgresql - 通过实时更新从一个 PostgreSQL 迁移到另一个
- .net - IIS + nginx 服务器上 api 的 8192 个字符限制
- reactjs - 创建一个可以在 React 上拖放列和行的表
- sockets - 可以使用插入的服务器证书构建的应用程序吗?
- python - 如何在 pytest 中将全局变量引用为 @pytest.mark.parametrize 值?
- typescript - 如何根据其他字段隐藏/显示按钮?
- java - 我怎样才能将soap api响应的某些字段发送到数据库中
- php - 如何在 PHP 中优化 VIPS 性能
- bash - 使用 sed 或 mv 命令重命名文件