Ajax实现简单登录

最新推荐文章于 2024-08-11 21:47:18 发布

Tila

最新推荐文章于 2024-08-11 21:47:18 发布

阅读量1.6w

点赞数 9

本文链接：https://blog.csdn.net/ya__tao/article/details/81570308

版权

jsp：

<%@ 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 action="LoginServlet" method="post">
    <table>
        <tr>
            <td>用户账号：</td>
            <td><input type="text" name="username" onblur="checkUser(this)"/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password" name="password"/></td>
        </tr>
        <tr>
            <td><input type="submit" value="注册"/></td>
            <td><input type="reset" value="重置"></td>
        </tr>
    </table>
</form>

<script type="text/javascript">
    //创建XMLHttpRequest
    function createXmlHttpRequest(){
        if(window.XMLHttpRequest){
            return new XMLHttpRequest();
        }else{
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    //当用户账号输入框失去焦点时调用该方法
    function checkUser(obj){
        //获取输入框输入的值
        var user = obj.value;
        //如果输入框中的值为空，那么弹窗提示，并且让该输入框获得焦点
        if(!user){
            alert("用户名不能为空！");
            obj.focus();
            return;
        }
        //不为空时，使用Ajax请求向后台发送信息，验证该用户名是否可用
        //get请求字符串
        var url="LoginServlet?username="+user;
        //调用方法创建XMLHttpRequest对象
        XmlHttpRequest = createXmlHttpRequest();
        //设置回调函数
        XmlHttpRequest.onreadystatechange=finish;
        //初始化xmlhttprequest
        XmlHttpRequest.open("GET",url,true);
        //发送请求
        XmlHttpRequest.send(null);
    }
    //回调函数
    function finish(){
        if(XmlHttpRequest.readyState == 4&& XmlHttpRequest.status == 200){
            var result = XmlHttpRequest.responseText;
            if(result =="true"){
                alert("用户名可用！");
            }else{
                alert("用户名不可用！");
            }
        }
    }
</script>
</body>
</html>

servlet：

package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;

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;
       
    /**
     * @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 stub
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		String name = request.getParameter("username");
		System.out.println(name);
		if(name.equals("admin")) {
			out.print(false);
		}else {
			out.print(true);
		}
		out.flush();
		out.close();
		
		//response.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 stub
		doGet(request, response);
	}

}

程序效果：