Rumah hujung hadapan web tutorial js Ajax实现异步用户名验证功能

Ajax实现异步用户名验证功能

Jan 10, 2018 am 09:59 AM
ajax mengesahkan

当用户填写好账号切换到密码框的时候,使用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;
}
Salin selepas log masuk


运行结果

代码实现

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>
Salin selepas log masuk

login.php

&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;
Salin selepas log masuk

以上就是本文的全部内容,希望对大家的学习有所帮助。

相关推荐:

关于ajax网络请求的封装实例

Ajax回退刷新页面问题的解决办法

Ajax请求和Filter配合案例详解

Atas ialah kandungan terperinci Ajax实现异步用户名验证功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk mengesahkan tandatangan dalam PDF Bagaimana untuk mengesahkan tandatangan dalam PDF Feb 18, 2024 pm 05:33 PM

Bagaimana untuk mengesahkan tandatangan dalam PDF

Kaedah terperinci untuk menyahsekat menggunakan pengesahan bantuan rakan WeChat Kaedah terperinci untuk menyahsekat menggunakan pengesahan bantuan rakan WeChat Mar 25, 2024 pm 01:26 PM

Kaedah terperinci untuk menyahsekat menggunakan pengesahan bantuan rakan WeChat

Bagaimana untuk menyelesaikan ralat 403 yang dihadapi oleh permintaan jQuery AJAX Bagaimana untuk menyelesaikan ralat 403 yang dihadapi oleh permintaan jQuery AJAX Feb 20, 2024 am 10:07 AM

Bagaimana untuk menyelesaikan ralat 403 yang dihadapi oleh permintaan jQuery AJAX

Ciri baharu dalam PHP 8: Ditambah pengesahan dan tandatangan Ciri baharu dalam PHP 8: Ditambah pengesahan dan tandatangan Mar 27, 2024 am 08:21 AM

Ciri baharu dalam PHP 8: Ditambah pengesahan dan tandatangan

Bagaimana untuk menyelesaikan ralat permintaan jQuery AJAX 403 Bagaimana untuk menyelesaikan ralat permintaan jQuery AJAX 403 Feb 19, 2024 pm 05:55 PM

Bagaimana untuk menyelesaikan ralat permintaan jQuery AJAX 403

Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax? Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax? Mar 09, 2024 pm 05:36 PM

Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax?

Bagaimana untuk menyelesaikan masalah log masuk wap yang tersekat dalam pengesahan token mudah alih? Bagaimana untuk menyelesaikan masalah log masuk wap yang tersekat dalam pengesahan token mudah alih? Mar 14, 2024 pm 07:35 PM

Bagaimana untuk menyelesaikan masalah log masuk wap yang tersekat dalam pengesahan token mudah alih?

Bagaimana untuk menyelesaikan masalah jQuery AJAX ralat 403? Bagaimana untuk menyelesaikan masalah jQuery AJAX ralat 403? Feb 23, 2024 pm 04:27 PM

Bagaimana untuk menyelesaikan masalah jQuery AJAX ralat 403?

See all articles