ajax异步验证用户名

来源:互联网 发布:霸主软件 编辑:程序博客网 时间:2024/06/04 18:53

ajax异步验证代码

注册时验证注册的用户名(邮箱等)是否存在

<%@ 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"><script type="text/javascript" src="${pageContext.request.contextPath }/js/myJS.js"></script><title>Insert title here</title>    <script type="text/javascript">        window.onload=function(){            var nameElement = document.getElementsByName("userName")[0];            nameElement.onblur = function(){                var name = this.value;//this等价于nameElement                //创建XMLHttpRequest对象            var xhr = getXMLHttpRequest();            //处理结果            xhr.onreadystatechange = function(){                if(xhr.readyState==4){//请求一切正常                    if(xhr.status==200){//服务器响应一切正常                        //alert(xhr.responseText);//得到响应结果                        var msg = document.getElementById("msg");                        if(xhr.responseText=="true"){                            msg.innerHTML =  "<font color='red'>用户名已存在</font>";                            //msg.innerText = "<font color='red'>用户名已存在</font>";                        }else{                            msg.innerHTML = "可以使用";                        }                    }                }            }            //创建连接            xhr.open("get","${pageContext.request.contextPath }/servlet/ckNameServlet?name="+name.value);            //发送请求            xhr.send(null);            }        }    </script></head><body>        用户名:<input type="text" name="userName" /><span id="msg"></span><br/>        密码<input type="password" name="pwd"/><br/></body></html>

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;public class CkNameServlet extends HttpServlet {    private static final long serialVersionUID = 1L;    public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        PrintWriter out = response.getWriter();        String name = request.getParameter("name");        //模拟数据库        if("tom".equals(name)){            //如果用户名为tom则返回true            out.print(true);        }else{            out.print(false);        }    }    public void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        doGet(request, response);    }}
原创粉丝点击