Ajax实现注册异步校验

来源：互联网发布：血糖检测数据编辑：程序博客网时间：2024/06/10 22:16

Ajax实现注册异步校验

注册的servlet

/***注册的servlet*/package com.etc.servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.etc.entity.Admin;import com.etc.service.AdminService;public class AdminServlet extends HttpServlet {    private AdminService adminService = new AdminService();    public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        String loginid = request.getParameter("loginid");        Admin admin = adminService.getAdminById(loginid);        if(null!=admin){//表示用户名已注册            response.getWriter().write("no");        }else{//表示用户名未注册            response.getWriter().write("yes");        }    }    public void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        doGet(request, response);    }}

jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">    <title>添加管理员界面</title>    <style>        #div1{            height: 400px;            width:500px;        }    </style>    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>    <script type="text/javascript">    var xmlHttp;        function createXMLHttpRequest(){            if(window.XMLHttpRequest){                xmlHttp = new XMLHttpRequest();            }        }        function inputLogin(txt){            var id = $("#adminid").val();            var span = $("#s");            //jquery post实现异步校验            $.post(                "AdminServlet",//url路径                {loginid:id},//参数                function(data){                    if(data == "yes"){                        span.css("color","green").html("用户名可用...");                    }else{                        span.css("color","red").html("用户名已存在...");                    }                },//回调函数                "text"//类型            );            //jquery get实现异步校验            /*$.get(                "AdminServlet",//url路径                {loginid:id},//参数                function(data){                    if(data == "yes"){                        span.css("color","green").html("用户名可用...");                    }else{                        span.css("color","red").html("用户名已存在...");                    }                },//回调函数                "text"//类型            );            */            /*            //jquery 实现异步校验            $.ajax({                type:"GET",                url:"AdminServlet",                data:"loginid="+id,                dataType:"text",                success:function(d){                    if(d == "yes"){                        span.css("color","green").html("用户名可用...");                    }else{                        span.css("color","red").html("用户名已存在...");                    }                }            });            */            /*            //自己写方法AJax实现异步校验            createXMLHttpRequest();            var admin = txt.value;            xmlHttp.onreadystatechange = callback;            var url = "AdminServlet?loginid="+admin;            xmlHttp.open("GET",url,true);            xmlHttp.send(null);            */        }        //回调函数        function callback(){            var span = document.getElementById("s");            if(xmlHttp.readyState == 4){                if(xmlHttp.status == 200){                    var data = xmlHttp.responseText;                    if(data == "yes"){                        span.style.color="green";                        span.innerHTML="用户名可用";                    }else{                        span.style.color="red";                        span.innerHTML="用户名已存在";                    }                }            }        }    </script>  </head>  <body>  <center>  <div id="div1">    <fieldset>        <legend>注册管理员</legend>        <form action="" method="post">            <p>                用户名:<input type="text" name="adminid" id="adminid" onblur="inputLogin(this)"/>                <span id="s"></span>            </p>            <p>                密&nbsp;&nbsp;码:<input type="password" name="adminid" />            </p>            <input type="submit" value="注册" />        </form>    </fieldset>   </div>   </center>  </body></html>

这里是使用servlet+jsp实现的其他框架使用，只是servlet改变。原理不变。
这里保存下，方便下次使用….

阅读全文

1 0