Ajax实现注册异步校验

最新推荐文章于 2019-10-22 21:56:42 发布

taozui_1212

最新推荐文章于 2019-10-22 21:56:42 发布

阅读量358

点赞数 3

分类专栏： Ajax 文章标签： ajax 异步 AJax实现注册异步

本文链接：https://blog.csdn.net/taozui_1212/article/details/77573936

版权

Ajax 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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改变。原理不变。
这里保存下，方便下次使用….

taozui_1212

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Ajax实现注册异步校验

Ajax实现注册异步校验注册的servlet/***注册的servlet*/package com.etc.servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;imp
复制链接

扫一扫