Ajax implements asynchronous username verification function-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Ajax implements asynchronous username verification function

Jan 10, 2018 am 09:59 AM

ajax verify

When 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(&quot;account&quot;).value;
if (window.XMLHttpRequest)
 xmlhttp=new XMLHttpRequest();
else
 xmlhttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);
 
xmlhttp.open(&quot;GET&quot;,&quot;login.php?account=&quot;+name,true);
xmlhttp.send();
 
xmlhttp.onreadystatechange=function(){
 if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
  document.getElementById(&quot;accountStatus&quot;).innerHTML=xmlhttp.responseText;
}

Copy after login

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(&quot;account&quot;).value;
if (window.XMLHttpRequest)
 xmlhttp=new XMLHttpRequest();
else
 xmlhttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);
 
xmlhttp.open(&quot;GET&quot;,&quot;login.php?account=&quot;+name,true);
xmlhttp.send();
 
xmlhttp.onreadystatechange=function(){
 if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
  document.getElementById(&quot;accountStatus&quot;).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>

Copy after login

&lt;?php
  $con = mysqli_connect(&quot;localhost&quot;,&quot;root&quot;,&quot;GDHL007&quot;,&quot;sysu&quot;);
 
  if(!empty($_GET[&#39;account&#39;])){
    $sql1 = &#39;select * from login where account = &quot;&#39;.$_GET[&#39;account&#39;].&#39;&quot;&#39;;
    //数据库操作
    $result1 = mysqli_query($con,$sql1);
    if(mysqli_num_rows($result1)&gt;0)
      echo &#39;&lt;font style=&quot;color:#00FF00;&quot;&gt;该用户存在&lt;/font&gt;&#39;;
    else 
      echo &#39;&lt;font style=&quot;color:#FF0000;&quot;&gt;该用户不存在&lt;/font&gt;&#39;;
    mysqli_close($con);
  }else
    echo &#39;&lt;font style=&quot;color:#FF0000;&quot;&gt;用户名不能为空&lt;/font&gt;&#39;;
 
?&gt;

Copy after login

The above is the entire content of this article, I hope it will be helpful to everyone's study.

Related recommendations:

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn