AJAX——注册新用户的重名提示

基本概念

AJAX：AJAX引擎其实是一个JavaScript对象，全写是 window.XMLHttpRequest对象，由于浏览器的版本不同，特别是老版本的IE浏览器，虽然也支持AJAX引擎，但是写法上有区别，在IE低版本中通常用 ActiveXObject对象来创建AJAX引擎。 AJAX 来自英文“Asynchronous Javascript And XML” 的缩写，也称为异步JavaScript和XML。简言之，就是一个JS对象，可以实现在网页加载完成以后，不用刷新的情况下与服务器交互。产生极好的用户体验效果。

示例

以会员注册的用户名为例

reg.html

<!DOCTYPE html><html>
<head><meta charset="utf-8"/><title>AJAX引擎实现用户名重名检测</title></head><body><form><p>用户名：<input type="text" name="username" id="username"/> <span id="result"></span></p><p>密码：<input type="password" name="pwd1"/></p><p>确认密码：<input type="password" name="pwd2"/></p><p><input type="button" value="立即注册"/></p></form><script type="text/javascript">var username=document.getElementById('username');//用户名输入框失去焦点时触发username.onblur=function(){//主角登场——AJAX引擎的创建及使用详细代码来了var ajax=new XMLHttpRequest(); //创建AJAX引擎实例//创建GET请求，发送请求时传username值ajax.open('GET','check.php?username='+this.value); //当AJAX引擎的状态产生改变时触发onreadystatechange属性指向的函数（多次执行）//状态值有5个：0 1 2 3 4 ，其中4表示服务器端响应就绪ajax.onreadystatechange=function(){//必须在服务器响应就绪，并且HTTP的状态码是200时才接收数据//ajax.readyState 获取到服务器响应状态码，必须是4才表示就绪//ajax.status 获取到HTTP的状态码，必须是200才表示成功if(ajax.readyState==4 && ajax.status==200){//ajax.responseText 接收服务器响应回来的内容//console.log(ajax.responseText);//接收到服务器响应数据后，AJAX工作已完成，可根据结果显示提示信息If(ajax.responseText=='1'){result.innerHTML='该用户名太受欢迎，请重新选择';result.style.color='#f00'; //将字体设置为红色}else{result.innerHTML='恭喜你，可以注册';result.style.color='#0a0'; //将字体设置为绿色}}}ajax.send(); //发送请求}</script></body></html>

check.php

<?php//服务器端的代码可以使用PHP编写，根据逻辑反馈数据给客户端实现验证功能$username=$_GET['username'];//连接数据库的代码
include 'conn.php';$sql="select ID from wxyy where ID='$username'";
$rs=mysqli_query($connID,$sql);//将构造好的SQL语句发到服务器上执行if( mysqli_num_rows($rs) ){echo '1'; //如果用户名找到有结果，证明该用户名已存在，返回1}else{echo '0'; //如果用户名未找到结果，证明该用户名不存在，返回0}
//关闭数据库连接，释放结果集
mysqli_free_result($rs);
mysqli_close($connID);?>

效果

参考文章

https://www.itsource.cn/web/news/5/20170512/1246.html

AJAX——注册新用户的重名提示相关推荐

Ang 表单注册新用户
用户填写必须的信息以注册新用户. import {Form,Input,Tooltip,Icon,Cascader,Select,Row,Col,Checkbox,Button,AutoComplet ...
如何实现共享软件网络授权认证，包括注册新用户、登录、修改密码等操作
开发共享软件,传统的是采用注册码验证方式,这种方式是大多数共享软件采用的方式,另外还有一种常见的验证方式,就是通过网络授权认证的方式,这种方式通过在程序中调用服务器的服务进行.一般具有验证用户名可用. ...
躺枪实惨！与新冠病毒“重名”，这款墨西哥国民啤酒宣布暂停生产...
近几个月因为新冠肺炎的出现,给全球的人们带很大影响,这场突发的疫情不仅影响了人们的正常生活,还严重威胁了人民的生命安全.好在国内疫情形势日渐好转,但是还要提醒大家,疫情还未真正结束,戴口罩.少出门.少 ...
Laravel8 实现注册新用户时邮箱验证
Laravel 实现注册新用户时邮箱验证前期准备安装需要的组件配置数据库配置邮箱方法一:使用 MailTrap 方法二:使用谷歌邮箱 1. 数据库迁移文件添加字段 2. 发送邮件到用户邮箱 ...
gitee注册新用户收不到验证码, 不管是手机还是邮箱都收不到验证码解决方案
gitee码云注册新用户收不到验证码, 不管是手机还是邮箱都收不到验证码解决方案题真的是气死我了, 搞了两三个小时, 不管是手机注册还是邮箱注册还是第三方登录我都收不到注册处所需的验证码, 如下图. ...
gitlab安装完成后注册新用户
gitlab配置SMTP发送邮件,使用163邮箱. 0. gitlab服务器 1. 邮箱配置内容 sudo vim /etc/gitlab/gitlab.rb 配置内容如下: external_url ...
腾讯云老用户重新注册新账号算新用户吗？
腾讯云重新注册账号算新用户吗?实名认证信息和老用户不同的话,算新用户.腾讯云老用户重新注册账号算新用户吗?算,但有限制,为了防止羊毛党薅羊毛,腾讯云也是有风控系统的,腾讯云百科告诉大家如何重新注册账号 ...
linux 创建新用户
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一. 1.创建用户并用-d参数设置根目录并 -s修改用户登录的Shell? 2.给test设置密码 3给用户赋予su ...
ubuntu创建新用户并设置sudo权限
总结:只有两条命令 1. sudo adduser newaccount 创建新用户 newaccount,按提示一路确认即可 2. sudo adduser newaccount sudo 给用户 ...

AJAX——注册新用户的重名提示

基本概念

示例

效果

参考文章

AJAX——注册新用户的重名提示相关推荐

最新文章

热门文章