使用HTML+thymeleaf+Ajax异步,使用form表单提交写一个登录页面
时间: 2023-12-24 18:02:38 浏览: 42
好的,下面是一个使用HTML+Thymeleaf+Ajax异步提交的登录页面的示例代码:
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Login</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#loginBtn").click(function(){
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
type: "POST",
url: "/login",
data: {
"username": username,
"password": password
},
success: function(data){
if (data == "success") {
window.location.href = "/home";
} else {
$("#errorMsg").text("Invalid username or password.");
}
},
error: function(){
$("#errorMsg").text("Server error. Please try again later.");
}
});
});
});
</script>
</head>
<body>
<h1>Login</h1>
<form>
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username"/>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password"/>
</div>
<div>
<button type="button" id="loginBtn">Login</button>
</div>
<div id="errorMsg"></div>
</form>
</body>
</html>
```
在这里,我们使用了jQuery库来方便地处理Ajax请求。当用户点击登录按钮时,JavaScript代码会通过Ajax发送一个POST请求到服务器上的“/login”URL。请求中包含了用户输入的用户名和密码。服务器会根据请求中的用户名和密码进行验证,并返回一个表示验证结果的字符串。如果验证成功,JavaScript代码会将用户重定向到主页;否则,会在页面上显示错误消息。
值得注意的是,由于这个登录页面并没有使用真正的表单提交,所以我们需要通过JavaScript代码来处理提交操作。在这个例子中,我们使用了jQuery的click事件来监听提交按钮的点击事件,并在事件处理函数中执行Ajax请求。此外,我们还使用了Thymeleaf模板引擎来生成HTML代码。