点击提交按钮后使用Ajax将用户名和密码传至后台校验，然后判断返回结果进行跳转或提示错误。
1 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> 2 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> 3 <html> 4 5 <head> 6 <meta charset="UTF-8"> 7 <title>登陆页面</title> 8 <link rel='stylesheet prefetch' href='login/bootstrap.min.css'> 9 <link rel="stylesheet" href="login/style.css"> 10 <script src="jquery-3.2.1.min.js"></script> 11 12 <script type="text/javascript"> 13 function sub() { 14 var name = $("#name").val(); 15 var password = $("#password").val(); 16 //第二步：验证数据，这里需要从数据库调数据，我们就用到了ajax 17 $.ajax({ 18 url: "/usercheck",//请求地址 19 data: {name: name, password: password},//提交的数据 20 type: "POST",//提交的方式 21 dataType: "TEXT", //返回类型 TEXT字符串 JSON XML 22 success: function (data) { // 校验返回内容，进行跳转 23 //开始之前要去空格，用trim() 24 if (data.trim() == "true") { 25 window.location.href = "/welcome?name=" + name + "&password=" + password; 26 } 27 else { 28 alert("用户名或者密码错误!"); 29 } 30 } 31 }) 32 } 33 34 </script> 35 </head> 36 37 <body> 38 <div class="wrapper"> 39 <div class="form-signin"> 40 <h2 class="form-signin-heading">请登陆</h2> 41 <input type="text" class="form-control" value="mike" name="name" id="name" placeholder="用户名" required="" 42 autofocus=""/> 43 <input type="password" class="form-control" value="123" name="password" id="password" placeholder="密码" 44 required=""/> 45 <label class="checkbox"> 46 <input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe">记住我 47 <a href="infoSubmit.html">注册</a> 48 </label> 49 <%--<button class="btn btn-lg btn-primary btn-block" id="btn">登陆</button>--%> 50 <button type="submit" id="btn" class="btn btn-lg btn-primary btn-block" onclick="sub()">提交</button> 51 </div> 52 </div> 53 </body> 54 55 </html>
界面如下：
