Ajax implements asynchronous username verification function
Jan 10, 2018 am 09:59 AMWhen the user fills in the account and switches to the password box, use ajax to verify the availability of the account. This article mainly introduces the asynchronous user name verification function of Ajax in detail. Friends who are interested in ajax can refer to it
The layout is relatively simple first. The rendering is as follows
ajax function:
When the user fills in the account and switches to the password box, use ajax to verify the availability of the account. The verification method is as follows: first create an XMLHTTPRequest object, then send the information that needs to be verified (user name) to the server for verification, and finally determine whether the user name is available based on the status returned by the server.
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; }
Running results
##Code implementation
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> <p id="content"> <h2>使用Ajax实现异步登陆验证</h2> <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> </p> </body> </html>
<?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 style="color:#00FF00;">该用户存在</font>'; else echo '<font style="color:#FF0000;">该用户不存在</font>'; mysqli_close($con); }else echo '<font style="color:#FF0000;">用户名不能为空</font>'; ?>
About the encapsulation example of ajax network request
Solution to the problem of Ajax rollback and refresh page
Ajax request and Filter cooperation case details
The above is the detailed content of Ajax implements asynchronous username verification function. For more information, please follow other related articles on the PHP Chinese website!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Detailed method to unblock using WeChat friend-assisted verification

New features in PHP 8: Added verification and signing

How to solve the 403 error encountered by jQuery AJAX request

How to solve jQuery AJAX request 403 error

How to get variables from PHP method using Ajax?

How to solve the problem of steam login stuck in mobile token verification?

How to solve the problem of jQuery AJAX error 403?
