Springboot+bootstrap,代码实现 form表单提交,然后切换index主页中包含的content部分页面
时间: 2024-05-12 07:17:25 浏览: 70
springboot+bootstrap博客系统源码
好的,我明白了。关于你的问题,可以参考以下代码实现:
1. 在Spring Boot中,使用Thymeleaf模板引擎来渲染页面。在controller中加入以下代码:
```java
@RequestMapping(value = "/form", method = RequestMethod.POST)
public String handleFormSubmission(@ModelAttribute("user") User user, Model model) {
// 处理表单提交
model.addAttribute("success", true);
return "index"; // 返回index页面
}
```
2. 在index页面中,使用Thymeleaf标签引入表单并提交表单数据:
```html
<form action="#" th:action="@{/form}" th:object="${user}" method="post">
<input type="text" th:field="*{name}" />
<input type="text" th:field="*{age}" />
<button type="submit">提交</button>
</form>
<!-- 成功提交后显示消息 -->
<div th:if="${success}">
<span>提交成功!</span>
</div>
```
3. 在index页面中,使用AJAX技术实现异步页面刷新:
```javascript
$('form').submit(function(e) {
e.preventDefault();
$.ajax({
url: $(this).attr('action'),
type: 'POST',
data: $(this).serialize(),
success: function(data) {
$('#content').html(data); // 更新页面content部分
}
});
});
```
这样,当用户提交表单时,页面会异步地刷新并显示提交成功的消息。同时,content部分页面也会被切换成服务器返回的新页面。
阅读全文