新建一個JavaWeb項目，配置好相關設置。
在web創建一個data包，裏面添加一個userlist文檔，儲存用戶信息
編輯默認頁面
新建一個getUserList.html，用JavaScript腳本語言獲取用戶列表
<script>
function loadUserList() {
//聲明請求對象
var xmlhttp;
//實例化請求對象
if (window.XMLHttpRequest){
//IE7+, FireFox, Chrome, Opera, Safari瀏覽器裏執行代碼
xmlhttp = new XMLHttpRequest();
}else {
//IE5, IE6 瀏覽器裏執行代碼
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
</script>
getUserList.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取用戶列表</title>
<script>
function loadUserList() {
//聲明請求對象
var xmlhttp;
//實例化請求對象
if (window.XMLHttpRequest) {
//IE7+, FireFox, Chrome, Opera, Safari瀏覽器裏執行代碼
xmlhttp = new XMLHttpRequest();
} else {
//IE5, IE6 瀏覽器裏執行代碼
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//監聽請求狀態的變化，一旦有變化，執行相應的回調函數
xmlhttp.onreadystatechange = function () {
//判斷請求是否成功，響應是否完成
if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
//利用響應文本修改頁面元素內容
document.getElementById("users").innerHTML = xmlhttp.responseText;
}
}
//新建HTTP請求，採用GET方式，請求採用異步方式
xmlhttp.open("GET", "/AjaxDemo/data/userlist.txt", true);
//發送HTTP請求,不傳遞參數
xmlhttp.send(null);
}
</script>
</head>
<body>
<h3>用戶列表</h3>
<div id="users"></div>
<hr>
<button type="button" onclick="loadUserList()">獲取用戶列表</button>
</body>
</html>
效果展示
新建一個login.html頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function login() {
//獲取用戶名與密碼
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
alert(username +" ： " +password);
}
function reset() {
//清空用戶名和密碼數據
document.getElementById("username").value = "";
document.getElementById("password").value = "";
}
</script>
</head>
<body>
<h3 style="text-align: center">用戶登錄</h3>
<table border="1" cellpadding="10" style="margin: 0px auto">
<tr>
<td align="center">用戶名</td>
<td><input type="text" id="username" name="username"/></td>
</tr>
<tr>
<td align="center">密 碼</td>
<td><input type="password" id="password" name="password"/></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" onclick="login()" value="登錄">
<input type="button" onclick="reset()" value="重置">
</td>
</tr>
</table>
</body>
</html>
通過Ajax請求來轉跳頁面和傳遞參數，根據不同的返回值來返回不同的頁面（可能是success也可能是failure）
function login() {
//獲取用戶名與密碼
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
//聲明請求對象
var xmlhttp;
//實例化請求對象
if (window.XMLHttpRequest) {
//IE7+, FireFox, Chrome, Opera, Safari瀏覽器裏執行代碼
xmlhttp = new XMLHttpRequest();
} else {
//IE5, IE6 瀏覽器裏執行代碼
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//監聽請求狀態的變化，一旦有變化，執行相應的回調函數
xmlhttp.onreadystatechange = function () {
//判斷請求是否成功，響應是否完成
if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
// 根據返回值不同跳轉不同的頁面
if (xmlhttp.responseText == "success") {
//跳轉到登錄成功頁面，傳遞用戶名
window.location = "success.html?username=" + username;
} else {
//跳轉到登錄失敗頁面，傳遞用戶名
window.location = "failure.html?username=" + username;
}
}
}
//新建HTTP請求，採用GET方式，請求採用異步方式
xmlhttp.open("POST", "/AjaxDemo/login", true);
//設置請求頭
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 定義要傳遞的數據
var data = "username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password);
//發送HTTP請求,不傳遞參數
xmlhttp.send(data);
}
LoginServlet.java
package net.ys.Servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* 功能：登陸處理控制器
* 作者：袁頌
* 日期：2019年11月24日
*/
@WebServlet(name = "LoginServlet", value = "/login")
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//設置請求對象字符編碼
request.setCharacterEncoding("utf-8");
//獲取AJAX提交的登錄數據
String username = request.getParameter("username");
String password = request.getParameter("password");
//判斷是否登錄成功，返回不同的數據
PrintWriter out = response.getWriter();
if (username.equals("admin") && password.equals("123456")) {
out.print("success");
} else {
out.print("failure");
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
}
