这篇文章给大家分享的是有关ajax如何实现异步用户名验证功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。先看看布局比较简单，效果图如下ajax功能： 当用户填写好账号切换到密
这篇文章给大家分享的是有关ajax如何实现异步用户名验证功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
先看看布局比较简单，效果图如下
ajax功能：
当用户填写好账号切换到密码框的时候，使用ajax验证账号的可用性。检验的方法如下：首先创建XMLHttpRequest对象，然后将需要验证的信息（用户名）发送到服务器端进行验证，最后根据服务器返回状态判断用户名是否可用。
function checkAccount(){var xmlhttp;var name = document.getElementById("account").value;if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("GET","login.PHP?account="+name,true);xmlhttp.send(); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("accountStatus").innerhtml=xmlhttp.responseText;}运行结果
代码实现
index.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Ajax登陆验证</title><script type="text/javascript">function checkAccount(){var xmlhttp;var name = document.getElementById("account").value;if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("GET","login.php?account="+name,true);xmlhttp.send(); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById("accountStatus").innerHTML=xmlhttp.responseText;}}</script></head><body><div id="content"><h3>使用Ajax实现异步登陆验证</h3><fORM>账 号：<input type="text" id="account" autofocus required onblur="checkAccount()"></input><span id="accountStatus"></span><br><br>密 码：<input type="passWord" id="password" required></input><span id="passwordStatus"></span><br><br><input type="submit" value="登陆"></input></form></div></body></html>login.php
<?php $con = mysqli_connect("localhost","root","GDHL007","sysu"); if(!empty($_GET['account'])){ $sql1 = 'select * from login where account = "'.$_GET['account'].'"'; //数据库操作 $result1 = Mysqli_query($con,$sql1); if(mysqli_num_rows($result1)>0) echo '<font >该用户存在</font>'; else echo '<font >该用户不存在</font>'; mysqli_close($con); }else echo '<font >用户名不能为空</font>'; ?>ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，可以通过在后台与服务器进行少量数据交换，使网页实现异步更新。
感谢各位的阅读！关于“Ajax如何实现异步用户名验证功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
--结束END--
本文标题: Ajax如何实现异步用户名验证功能
本文链接: https://lsjlt.com/news/252815.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0