JSP(ajax)+Servlet實現簡單的登入功能

Yang_xinqiao發表於2018-09-19
JSServlet

之前在jsp中寫js或者引入js，有不少引入了沒什麼效果，和用HBuilder寫的效果差了很多，花了不少時間弄，沒有搞定，應該是自己的底子太差勁了，對jsp和js的理解不夠深；今天學了Ajax發現不少的東西用Ajax寫起來更方便些。我就簡單的寫一個小功能實現一下登入。

//這是登入介面
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
//form表單
	<form action="">
		姓名:<input type="text" id="myinput" name="name" /> 
		<span id="myspan"></span>
		<br /> 
		密碼:<input type="password" id="mypwd" name="pwd" /> 
		<br /> 
		<input type="button" id="mybt" onclick="jump()" value="提交">
	</form>
</body>
<script type="text/javascript">
//定義一個全域性的ajax變數
	var ajax;
//getAjax()方法用來獲取一個Ajax物件
	function getAjax() {
		try {
//現代的瀏覽器獲取Ajax的方法
			ajax = new XMLHttpRequest();
		} catch (e) {
//try中無法執行，得到錯誤，catch抓取錯誤，ie7以下的版本獲取Ajax的方法
			ajax = new ActiveXObject("Microsoft.XMLHTTP");
		}
//返回一個Ajax物件
		return ajax;
	}
	function jump() {
//得到Ajax的物件
		ajax = getAjax();
//使用open方法與伺服器建立連線
		ajax.open("POST", "/java-9-19day/logins", true);
//監聽ajax的狀態，每當狀態改變時，就會呼叫該函式
		ajax.onreadystatechange = function() {
//當Ajax滿足以下條件時就會進入下一步
			if (ajax.readyState == 4 && ajax.status == 200) {
//獲取伺服器返回的資料
				var result = ajax.responseText;
				if (result == "true") {
//滿足條件就轉到welcome.jsp 
					location.href = "/java-9-19day/welcome.jsp";
					document.getElementById("mybt").disabled = false;
				} else {
//不滿足條件進行提示，並將按鈕變成不可用狀態
					document.getElementById("myspan").innerHTML = "error";
					document.getElementById("mybt").disabled = true;
				}
			}
		}
//Ajax時post提交，必須寫這個請求頭，就這麼寫，都是一樣的
		ajax.setRequestHeader("Content-type",
				"application/x-www-form-urlencoded");
//獲得form表單的資料
		var name = document.getElementById("myinput").value;
		var pwd = document.getElementById("mypwd").value;
//將其拼接成一個，傳送到servlet中
		var param = "name=" + name + "&password=" + pwd;
		ajax.send(param);
	}
</script>
</html>



package com.coding.ajaxpost;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/logins")
public class MyLoginServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("UTF-8");
		resp.setContentType("text/html;charset=utf8");
		System.out.println("come in");
//得到拼接的資料
		String name = req.getParameter("name");
		String pwd = req.getParameter("password");
		System.out.println(name+"--"+pwd);
//進行判斷
		if (name.equals("admin") && pwd.equals("123")) {
//進行響應，返回資料
			resp.getWriter().print(true);
		}else {
			resp.getWriter().print(false);
		}

	}
}

繼續加油，程式設計師的道路才剛剛開始！！！

相關文章