?
js
//創建Ajax對象,不同瀏覽器有不同的創建方法,其實本函數就是一個簡單的new語句而已。 function createXMLHttpRequest() {var XMLHttpRequest1;if (window.XMLHttpRequest) {XMLHttpRequest_test = new XMLHttpRequest();} else if (window.ActiveXObject) {try {XMLHttpRequest_test = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {XMLHttpRequest_test = new ActiveXObject("Microsoft.XMLHTTP");}}return XMLHttpRequest_test;}function ajax() {var un=document.getElementById("username").value;var pw=document.getElementById("password").value;var XMLHttpRequest_test = createXMLHttpRequest();//指明相應頁面 var url = "LoginServlet";XMLHttpRequest_test.open("POST", url, true);//請求頭,保證不亂碼 XMLHttpRequest_test.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//將兩個參數傳到servletXMLHttpRequest_test.send("userName=" +un+ "&passWord=" + pw);//處理從servlet返回的結果XMLHttpRequest_test.onreadystatechange = function() {//這個4代表已經發送完畢之后 if (XMLHttpRequest_test.readyState == 4) {//200代表正確收到了返回結果 if (XMLHttpRequest_test.status == 200) {//彈出返回結果 //alert(XMLHttpRequest_test.responseText);var result=XMLHttpRequest_test.responseText;if(result=="1"){//登陸成功alert("登陸成功!您好:"+un+"您的密碼為:"+pw);}else if(result=="2"){//更換classvar hh = document.getElementById("hd");hh.className="msg";hh.innerText = "用戶名或密碼不能為空";}else{//更換classvar hh = document.getElementById("hd");hh.className="msg";hh.innerText = "用戶名或密碼錯誤";}} else {//如果不能正常接受結果,你肯定是斷網,或者我的服務器關掉了。 alert("網絡連接中斷!");}}}return false;//阻止提交,也就是防止原頁面刷新導致修改的界面一閃而過}
servlet
package com.swpu;import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.Statement;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;/*** Servlet implementation class LoginServlet*/ @WebServlet("/LoginServlet") public class LoginServlet extends HttpServlet {private static final long serialVersionUID = 1L;private String User;private String Password;String sql=null;Connection conn=null;Statement stmt=null;ResultSet rs=null;boolean isLoing=false;/*** @see HttpServlet#HttpServlet()*/public LoginServlet() {super();// TODO Auto-generated constructor stub }/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubresponse.getWriter().append("Served at: ").append(request.getContextPath());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubresponse.setContentType("text/html;charset=UTF-8");response.setCharacterEncoding("utf-8");PrintWriter out=response.getWriter();//獲取參數User=request.getParameter("userName");Password=request.getParameter("passWord");//連接數據庫檢測用戶名和密碼try {//連接數據庫DriverManager.registerDriver(new com.mysql.jdbc.Driver());conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/homework?useUnicode=true&characterEncoding=UTF-8","root","root");stmt=conn.createStatement();sql="select password from login_tb where user='"+User+"'";rs=stmt.executeQuery(sql);if(rs.next()) {//獲取輸入用戶名的密碼進行檢驗,若與輸入的一致則isLogin置為true,反之置falseString pw=rs.getString("password");if (pw.equals(Password)) {isLoing=true;}else {isLoing=false;}}else {//若未查詢到用戶的存在也置為falseisLoing=false;}} catch (Exception e) {// TODO: handle exception e.printStackTrace();}finally {try {if(rs!=null)rs.close();if(stmt!=null)stmt.close();if(conn!=null)conn.close();} catch (Exception e2) {// TODO: handle exception e2.printStackTrace();}}if(isLoing) {//這個字符串將會在js中被接收//1代表登錄成功//2代表用戶名或密碼為空//3代表用戶名或密碼錯誤out.write("1");}else if(User==""||Password==""){out.write("2");}else {out.write("3");}out.close();}}
html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>西南石油大學電子郵件系統</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/login.js"></script> </head><body><div class="top"><div class="r1"><div class="r2"><div class="logo"></div></div><a href="" target="" class="help">幫助</a></div></div><div class="content"><div class="loginBar"><div class="box"><div class="tab">賬號登錄<div class="dragbar"></div></div></div><div class="boxc"><div style="height: 10px;"></div><div style="margin-left: 42px; width: 270px; height: 30px;"><div class="hh" id="hd">用戶登錄</div></div><form method="post" οnsubmit="return ajax()" ><input type="text" class="text" name="username" id="username" style="ime-mode: disabled" _autocomplete="off" placeholder="用戶名" /><input type="password" class="text" name="password" id="password" _autocomplete="off" placeholder="密碼" /><div style="height: 10px;"></div><div class="bl"><span style="float: left;"> <font style="color: red; font-family: 宋體; clear: both;">學生選擇@stu.swpu.edu.cn</font></span> <span style="float: right;"> <a href="" style="outline: none; color: #999;">忘記密碼</a></span></div><input type="submit" class="btn" value="登 錄" style="background: url(img/login_btn.jpg)" /></form></div></div></div><div class="bottom">西南石油大學</div></body> </html>
?
?
?