使用原生js和Ajax实现无刷新用户登录

来源：互联网发布：中文翻译日文软件编辑：程序博客网时间：2024/05/20 07:52

整体思路是：完成一个简单的前端页面，将input中获取到的值（用户名和密码），作为参数利用Ajax放在url的末尾传给一个jsp文件，该文件调用Java代码完成对用户信息的确认（将用户名传到数据库，将密码读出），若密码为空，或不为空并与参数密码一致，或不为空并与参数密码不一致，分别生成三个json数据传到前端，Ajax获取到后，对三种不同情况进行分别处理。

1.写一个简单的登录页面

<%@ 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>管理员登录</title><script src="check.js"></script></head><body>    <h2 align="center"><font color="red">欢迎使用登录系统</font></h2>  <div align="center">        <div>             <label>用　户：</label>              <input id="user" type="text">        </div>                                     <div>             <label>密　码：</label>              <input id="password" type="password">        </div>        <div id="inform" style="color:red">    </div>         <div>             <input type="submit" value="    登 录    " onclick="check('user','password')">             <input type="reset" value="    重 置    " onclick="reset('user','password')">        </div>    </div></body></html>

红字标注的内容是放在另一个js文件中。

2.在check.js文件中，分别有四个函数function createXMLhttp()，function ajax(user,password)，function check(userid,passwordid)，function reset(userid,passwordid)

function createXMLhttp()这个函数主要是创建一个Ajax请求，需要注意的是为了兼容ie 5，6等较旧的浏览器，分别进行不同的处理。

//创建Ajax请求function createXMLhttp() {var xmlhttp;if (window.XMLHttpRequest){    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码    xmlhttp=new XMLHttpRequest();}else{    // IE6, IE5 浏览器执行代码    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}return xmlhttp;}

function ajax(user,password)这个函数主要是向指定url发送Ajax请求并附有参数（我这里url是一个jsp文件，参数即input中获取的用户名和密码），然后将反馈回来的json数据进行解析，并完成相关处理。

function ajax(user,password) {var xmlhttp = createXMLhttp();//当请求得到响应时，执行的逻辑xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){var logindata = JSON.parse(xmlhttp.responseText);if(logindata.checkResult == null){document.getElementById("inform").innerHTML="该用户不存在";}else if (logindata.checkResult == true) {window.location.href="index.jsp";//alert("done");}else if (logindata.checkResult == false){document.getElementById("inform").innerHTML="密码输入错误";}}}//发送向指定url发送Ajax请求var sendData = "User="+user+"&Password="+password+"&t="+Math.random();//添加Math.random（）后缀消除缓存var url = "loginJson.jsp?"+sendData;xmlhttp.open("GET",url,true);xmlhttp.send();}

function check(userid,passwordid)函数是对用户在input中输入的内容进行限制和相关提示，不能为空有好几种设置方法，可以直接在input中设置相关属性（我这里用代码实现了一下），还有就是用户名只能是数字这个限制，找了很多方法，这个方法比较好（见下方代码）。然后在这几种情况都满足的情况下才调用function ajax(user,password)。

function check(userid,passwordid) {var userString = document.getElementById(userid).value;var password = document.getElementById(passwordid).value;if (userString.length == 0) {document.getElementById("inform").innerHTML="用户名不能为空";} else if (password.length == 0) {document.getElementById("inform").innerHTML="密码不能为空";}else if(userString.length != 0 && password.length != 0){//ajax(user,password);if(!(/(^[1-9]\d*$)/.test(userString))){document.getElementById("inform").innerHTML="用户名含有非法字符";//有其他字母或者符号型字符的存在}else if((/(^[1-9]\d*$)/.test(userString))){user = parseInt(userString);//将文本框中的‘整型’字符串转化为int//alert(user+password);ajax(user,password);}}}

function reset(userid,passwordid)函数就是登录页面的重置按钮，在form下type=“reset”可以直接实现这个功能，然而我仅仅是将其作为一个按钮来用，故重写了这个方法。

//去掉form后，input中的type=reset标签失效，只能在onclick中重写reset函数function reset(userid,passwordid) {var userString = document.getElementById(userid);var password = document.getElementById(passwordid);userString.value="";password.value="";}

3.我在function ajax(user,password)中将带参数的Ajax请求发送给了一个loginJson.jsp的文件，这个文件负责接受请求的数据，把该用户名带入到数据库中，然后将数据库中查询到的结果进行判断和相关处理，并将处理结果写入json数据，将该json数据反馈给前端。

<%@page import="net.sf.json.JSONObject"%><%@page import="dao.CheckLogin"%><%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%//在Ajax的请求中提取参数int userAjax = Integer.parseInt(request.getParameter("User"));String passwordAjax = request.getParameter("Password");System.out.println(userAjax+passwordAjax);//将得到的用户名在数据库中进行查询，获得密码CheckLogin checkLogin = new CheckLogin();String password = checkLogin.check(userAjax);/* *密码为空，返回json数据{checkResult：null}；密码不为空且和参数password一致，返回json数据{checkResult：true}；相反不一致时返回json数据{checkResult：false} */if(password == null){JSONObject nulljson = new JSONObject();nulljson.put("checkResult", null);response.getWriter().write(nulljson.toString());}else if(password != null && password.equals(passwordAjax) == true){JSONObject truejson = new JSONObject();truejson.put("checkResult", true);response.getWriter().write(truejson.toString());}else if(password != null && password.equals(passwordAjax) == false){JSONObject falsejson = new JSONObject();falsejson.put("checkResult", false);response.getWriter().write(falsejson.toString());}%>

4.有关数据库链接的部分我就不详细写了，我主要写了一个查询函数CheckLogin类的check方法，这个函数接收一个用户名的参数，返回一个该用户名的密码。（用户存在返回密码，不存在返回null）

package dao;import java.sql.ResultSet;import java.sql.SQLException;import com.mysql.jdbc.Connection;import com.mysql.jdbc.PreparedStatement;import util.DBHelper;public class CheckLogin {public String check(int Tno) {Connection conn = null;PreparedStatement pStatement = null;ResultSet rSet = null;String password = null;try {conn = DBHelper.getConnection();String sql = "select Tpassword from administator where Tno=?";pStatement = (PreparedStatement) conn.prepareStatement(sql);pStatement.setInt(1, Tno);rSet = pStatement.executeQuery();if (rSet.next()) {password = rSet.getString("Tpassword");}} catch (SQLException e) {return null;} catch (Exception e) {e.printStackTrace();}return password;}}

5.至此，完工，下面贴几张效果图

阅读全文

0 0