AJAX检测用户名是否存在的方法
本文实例为大家分享了AJAX检测用户名是否存在的具体代码，供大家参考，具体内容如下
vscode:
index:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>用户注册</h2>
<form action="/doreg" method="post">
<ul>
<li>用户名：<input type="text" name="username" id="user"><span id="msg"></span></li>
<li>密码：<input type="text" name="pwd"></li>
<li>确认密码：<input type="text" name="repwd"></li>
<li><input type="submit" value="注册"></li>
</ul>
</form>
<script>
let user = document.querySelector("#user")
let msg = document.querySelector("#msg")
user.onblur = function(){
// alert("hello")
// 第一步：创建一个ajax对象
let xhr = new XMLHttpRequest(); // xhr表示ajax对象 此时ajax的状态是0
// console.log(xhr.readyState)
// 第二步：和服务器建立连接 get表示需要把数据放在url中
xhr.open("get","/check?username="+user.value)// 此时ajax的状态是1
// console.log(xhr.readyState)
// 第三步：发出请求
xhr.send(null); // null表示请求体是空 get请求的请求体都是空 post请求的请求体不空
// 第四步：得到服务器响应的结果 监听ajax状态变化
xhr.onreadystatechange = function () { // 当状态发生改变，就会触发onreadystatechange事件
// console.log(xhr.readyState); // xhr.readyState获取ajax对象的状态
if(xhr.readyState === 4 && xhr.status == 200){
// xhr.responseText 获取服务器响应的数据
// console.log(xhr.responseText)
msg.innerHTML = xhr.responseText;
}
}
}
</script>
</body>
</html>
JS:
let express = require("express");
let bodyParser = require("body-parser");
let app = express();
// 给ejs模板引擎设置别名，别名叫html
app.engine("html",require("ejs").__express);
app.set("view engine","html");// 使用html模板引擎
// 指定模板的存放位置
app.set("views","./views")
// 配置bodyParser
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:false}))
// 路由
app.get("/",(req,res)=>{
res.render("reg01"); // 渲染模块
})
// 处理注册
app.post("/doreg",(req,res)=>{
// 获取客户端传递的数据
let username = req.body.username.trim();
let pwd = req.body.pwd.trim();
let repwd = req.body.repwd.trim();
// console.log(username,pwd,repwd)
// 模拟从数据库中获取的用户信息
let users = ["wangcai","xiaoqiang","admin"];
if(users.find(user=>user===username)){
res.send("<h1 style='color: red'>对不起，该用户名已经被注册了，请换个用户名~<a href='/'>返回注册页</a></h1>")
}else{
res.send("<h1 style='color: green'>恭喜你，该用户名可以使用~<a href='/'>返回注册页</a></h1>")
}
})
app.listen(3000,()=>{
console.log("server is running on 3000~")
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
使用Ajax实时检测"用户名、邮箱等"是否已经存在
一个网站采用Ajax技术,不仅可以改善网站的用户体验性,而且大大节约了宝贵的带宽,减轻了服务器负荷(不再需要交互整个网页内容,而是局部). 今天分享一个"利用Ajax技术来检测用户名是否存在"的例子. 利用Ajax技术来检测用户名是否存在的原理流程图: 最终结果截图: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
-
利用Ajax检测用户名是否被占用的完整实例
适合人群:Ajax和jQuery入门 采用Ajax实现用户名验证 使用jQuery给出提示信息 用户注册的时候,使用Ajax实现检测用户名是否已经被注册过,很多细节没有实现,给大家做个简单普及. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//
-
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
PHP+Ajax检测用户名或邮件注册时是否已经存在是论坛或会员系统中常见的一个重要功能.本文就以实例形式简单描述这一功能的实现方法.具体步骤如下: 一.PHP检测页面 check.php页面代码如下: <script type="text/javascript" src="jiance.js"></script> <form name="myform" action="" method="
-
JQuery Ajax如何实现注册检测用户名
Ajax(无需等待直接向服务器发起请求) (Asynchronous Javascript And Xml) :异步的 Google创新的一种js技术 方法一:比较原始没有封装的方法: //核对用户名是否可用 var xmlhttp = null; function checkUser(userName) { if (xmlhttp == null) { xmlhttp = new XMLHttpRequest();//第一步:创建一步通信对象 } //第二步:设定回调函数 xmlhttp.on
-
PHP＋AJAX实现无刷新注册（带用户名实时检测）
很多时候,我们在网上注册个人信息,在提交完页面后,总得等待页面刷新来告诉我们注册是否成功,遇到网络差的时候,如果注册了一大串的东西,在经过漫长的等待页面刷新后,得到的确是"您的用户名已被使用"或XXXXXXX不合法,我想大家的心情一定特别不爽,今天就介绍个AJAX实现页面不刷新注册+实时检测用户信息的简单注册程序,希望对大家有所帮助.好的,先看注册界面代码: <table width="831" border="0" align="
-
AJAX实现无刷新检测用户名功能
先来看看原理图 register.php <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ajax无刷新检测</title> <style type="text/css"> body{margin:0;padding:0;}.content{width:800px;margin:0 auto;}ul,li{l
-
AJAX应用实例之检测用户名是否唯一(实例代码)
先给大家展示下效果图,然后再给大家撸代码,效果图如下所示: 下面写一个简单的例子,检测用户名是否唯一(直接撸代码): 前端界面: <%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transition
-
jQuery+Ajax实现用户名重名实时检测
利用jQuery框架,封装了底层的Ajax异步技术,通过简单的方法调用即可实现.这篇博客是针对用户注册时出现的用户名重名问题的自动检测,利用的技术是Ajax异步传输. register.jsp 注册显示页面 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM
-
ajax 检测用户名是否被占用
复制代码 代码如下: //检测用户名是否被占用 function GetO(){ var ajax=false; try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { ajax = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { ajax = false; } } if (!ajax && typeof X
-
Asp.net下利用Jquery Ajax实现用户注册检测（验证用户名是否存）
其中用到了jquery插件来验证用户名哦,这里是利用jquery ajax来验证用户名是否存在哦.大家看看效果图,后面将附上源码下载. jquery框架实现的ajax 验证用户名是否存在的部分JS 复制代码 代码如下: $("#accounts").formValidator({onshow:"请输入用户名",onfocus:"用户名至少4个字符,最多10个字符",oncorrect:"该用户名可以注册"}).inputVal
-
jquery ajax 检测用户注册时用户名是否存在
首先需要一个添加年级的页面,暂时叫grade.htm 这个文件需要引入两个文件jquery.js(jquery框架文件)和grade.js(验证的单独文件). 下面的input用于输入用户名字,id="gradeInfo"是为了显示提示信息用的. grade.htm 复制代码 代码如下: <input type="text" size="6" name="NAME" id="NAME"/><
-
PHP+Ajax实现的检测用户名功能简单示例
本文实例讲述了PHP+Ajax实现的检测用户名功能.分享给大家供大家参考,具体如下: 一 代码 fun.js: function chkUsername(username){ if(username==''){ //判断用户名是否为空 alert('请输入用户名!'); }else{ var xmlObj; //定义XMLHttpRequest对象 if(window.ActiveXObject){ //如果是浏览器支持ActiveXObjext则创建ActiveXObject对象 xmlObj