如何利用Ajax检测用户名是否被占用

2023-06-08 06:06:27 671人浏览安东尼

摘要

小编给大家分享一下如何利用ajax检测用户名是否被占用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！采用Ajax实现用户名验证使用Jquery给出提示信息用户注册

小编给大家分享一下如何利用ajax检测用户名是否被占用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

采用Ajax实现用户名验证

使用Jquery给出提示信息

用户注册的时候，使用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"><title>用户注册页面</title><script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script><script type="text/javascript">var xmlHttp;function createXMLHttpRequest(){if(window.XMLHttpRequest){xmlHttp = new XMLHttpRequest();}else if(window.ActiveXObject){xmlHttp = new ActiveXObject("Microsoft.XMLHttp");}}function validate(account){createXMLHttpRequest();xmlHttp.open("Get","ValidateServlet?account="+account,true);xmlHttp.onreadystatechange = callback;xmlHttp.send(null);}function callback(){if(xmlHttp.readyState==4){if(xmlHttp.status==200){var text = xmlHttp.responseText;if(text=="true"){//document.getElementById("msg").innerHTML = "该手机号已经被注册过";$("#msg").text("该手机号已经被注册");$("#sub").attr("disabled","true");//添加disabled属性，让按钮不可用}else{//document.getElementById("msg").innerHTML = "";$("#msg").text("");$("#sub").removeAttr("disabled");//移除disabled属性，让按钮可用}}else{alert("请求失败，错误码="+xmlHttp.status);}}}function checkInfo(){var account = $("#account").val();var pwd1 = $("#pwd1").val();var pwd2 = $("#pwd2").val();if(account==""||account==null){$("#msg").text("账号不能为空");$("#sub").attr("disabled","true");return false;}if(pwd1==""||pwd1==null||pwd2==""||pwd2==null||pwd1!=pwd2){$("#info").text("密码不能为空或者两次密码不一致");$("#sub").attr("disabled","true");return false;}$("#msg").text("");$("#info").text("");$("#sub").removeAttr("disabled");}function submit(){checkInfo();$("#reg").submit();} </script></head><body><fORM id="reg" name="reg" action="ReGISterServlet" method="post">账号：<input type="text" name="account" id="account" onblur="validate(this.value);"><span id="msg" >请输入手机号</span><br>密码：<input type="passWord" id="pwd1" name="password1" onblur="checkInfo();"><br>确认密码：<input type="password" id="pwd2" name="password2" onblur="checkInfo();"><span id="info" ></span><br><input type="button" id="sub" value="提交" onclick="submit();"></form></body></html>

下面是ValidateServlet模拟实现，没有做真正的数据库表数据检测，大家自行完成。

package com.ambow.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; @WebServlet("/ValidateServlet")public class ValidateServlet extends HttpServlet {private static final long serialVersionUID = 1L; public ValidateServlet() {  super();  }protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {PrintWriter pw = response.getWriter();String account = request.getParameter("account");System.out.println("account"+account);if("123".equals(account)) {pw.print("true");}else {pw.print("false");}}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}}

以上是“如何利用Ajax检测用户名是否被占用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！

--结束END--

本文标题: 如何利用Ajax检测用户名是否被占用

本文链接: https://lsjlt.com/news/252214.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341