<html>
<head>
<meta charset="UTF-8">
<title>登陆页面</title>
<link rel='stylesheet prefetch' href='https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript">
function sub() {
var name = $("#name").val();
var password = $("#password").val();
//第二步：验证数据，这里需要从数据库调数据，我们就用到了ajax
$.ajax({
url: "/submit",//请求地址
data: {name: name, password: password},//提交的数据
type: "POST",//提交的方式
dataType: "TEXT", //返回类型 TEXT字符串 JSON XML
success: function (data) { // 校验返回内容，进行跳转
//开始之前要去空格，用trim()
if (data.trim() == "true") {
window.location.href = "/welcome?name=" + name;
}
else {
alert("用户名或者密码错误!");
}
},
error: function (xhr) {
// 失败输出HTTP状态码
alert("调用失败！HTTP状态码：" + xhr.status);
}
})
}
</script>
</head> <body>
<div class="wrapper">
<div class="form-signin">
<h2 class="form-signin-heading">请登陆</h2>
<input type="text" class="form-control" value="tom" name="name" id="name" placeholder="用户名" required=""
autofocus=""/>
<input type="password" class="form-control" value="123" name="password" id="password" placeholder="密码"
required=""/>
<label class="checkbox">
<input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe">记住我
<a href="infoSubmit.html" class="regsiter">注册</a>
</label>
<button type="submit" id="btn" class="btn btn-lg btn-primary btn-block" onclick="sub()">登陆</button>
</div>
</div>
</body> </html>
style.css
body {
background: #eee !important;
}
.wrapper {
margin-top: 80px;
margin-bottom: 80px;
}
.form-signin {
max-width: 380px;
padding: 15px 35px 45px;
margin: 0 auto;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 30px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
font-size: 16px;
height: auto;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin .form-control:focus {
z-index:;
}
.form-signin input[type="text"] {
margin-bottom: -1px;
border-bottom-left-radius:;
border-bottom-right-radius:;
}
.form-signin input[type="password"] {
margin-bottom: 20px;
border-top-left-radius:;
border-top-right-radius:;
}
.checkbox {
margin-left: 100px;
}
.regsiter {
margin-left: 20px;
}
截图：
点击登陆按钮触发Ajax请求