springboot框架 html 添加页面点击按钮从后台获取值,如何把值传到添加页面,图和通过ajax进行判断值是否正确,不正确给出弹窗停止执行,正确继教执行.html的添加页面中的其它字段的值不受影响
时间: 2024-03-16 11:44:47 浏览: 76
首先,在Spring Boot框架中,您可以使用Thymeleaf模板引擎来渲染HTML页面。在HTML页面中,您可以使用表单来收集用户的输入,并通过提交表单将数据发送回后台。在您的情况下,您需要向添加页面添加一个按钮,在用户点击该按钮时触发一个JavaScript函数来获取值并将其传递回后台。您可以使用jQuery库来简化这个过程。
以下是一个示例HTML页面,其中包含一个表单和一个按钮:
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Add Page</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$("#submitButton").click(function() {
var value = $("#inputValue").val();
$.ajax({
url: "/checkValue",
type: "POST",
data: {value: value},
success: function(result) {
if (result == "true") {
// continue with form submission
$("#addForm").submit();
} else {
// display error message
alert("Invalid value!");
}
}
});
});
});
</script>
</head>
<body>
<form id="addForm" method="POST" action="/add">
<label for="inputValue">Input Value:</label>
<input type="text" id="inputValue" name="inputValue" required>
<button type="button" id="submitButton">Submit</button>
<!-- other form fields here -->
</form>
</body>
</html>
```
在这个示例中,我们首先引入了jQuery库。然后,我们使用JavaScript代码来为按钮添加一个单击事件处理程序。当用户单击按钮时,我们获取输入值并使用AJAX将其发送回后台。我们使用POST请求将值发送到“/checkValue”端点。在后台,您需要编写一个控制器方法来处理这个请求并返回一个布尔值,表示输入是否有效。
如果输入有效,我们将继续提交表单。否则,我们将显示一个警告框,停止执行。
请注意,我们将按钮类型设置为“button”,而不是默认的“submit”类型。这是因为我们需要在单击按钮时执行JavaScript代码,而不是直接提交表单。如果您使用默认的“submit”类型,表单将在单击按钮时立即提交,而不会触发JavaScript代码。
希望这可以帮助您解决问题!
阅读全文