Comment implémenter la fonction de vérification d'inscription en temps réel en utilisant php+ajax

Lorsque nous nous inscrivons sur le site Web, lors de la saisie du nom d'utilisateur, nous devons d'abord effectuer une vérification sans actualisation. Cet article présente principalement en détail la fonction de vérification en temps réel de l'enregistrement php+ajax. Les amis intéressés peuvent s'y référer

La technologie de vérification en temps réel d'ajax est déjà très mature sur certains sites Web standardisés, s'il existe un modèle de vérification d'enregistrement, cela impliquera certainement la vérification sans actualisation d'ajax, ce qui est excellent pour l'enregistrement des utilisateurs. expérience. , par rapport à un mode de vérification qui ne peut pas être connecté à l'arrière-plan sans s'actualiser dans le temps, et doit revenir pour s'actualiser, ce qui est très peu convivial pour l'expérience utilisateur.

Le mode ajax est requis pour presque toutes les applications du site. En tant que vérification frontale sans actualisation, ajax peut être utilisé en combinaison avec tous les langages back-end, tels que

asp+ajax, php+ajax,.net+ajax Attendez la combinaison, l'explication principale ici est la vérification de l'enregistrement de php+ajax.

La vérification suivante est un exemple complet. Lorsque nous nous inscrivons sur le site Web et saisissons le nom d'utilisateur, nous devons d'abord effectuer une vérification de non-actualisation et vérifier s'il existe des données du même nom dans la base de données en arrière-plan. S'il existe, il n'y aura pas d'invite d'actualisation indiquant que le nom d'utilisateur a été occupé. Au total, quatre fichiers sont impliqués ici.

ajax.js :Le fichier principal de la technologie ajax. Il est principalement utilisé pour afficher des invites de vérification de temps en temps. Ce fichier n'a généralement pas besoin d'être modifié, il suffit de le modifier. être appelé par le front-end.

var xmlHttp
function showHint(str)
{
if (str.length==0)
 { 
 document.getElementById("txtHint").innerHTML=""
 return
 }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
xmlHttp.onreadystatechange=stateChanged 

var geturl="conn.php?q="+str
//sid是增加一个随机数 防止页面启用缓存技术·
geturl=geturl+"&sid="+Math.random()
geturl=encodeURI(geturl);
geturl=encodeURI(geturl); 
xmlHttp.open("GET",geturl,true)
xmlHttp.send(null)
} 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
 {
 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch (e)
 {
 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 }
return xmlHttp;
}

conn.php :Ceci est le fichier de configuration du site Web. Vous devez configurer votre MySQL local. nom d'utilisateur et pour le mot de passe, vous devez configurer la connexion entre PHP et la base de données. Vous pouvez vous référer à l'article sur la connexion à la base de données PHP+MYSQL. De plus, les données reçues doivent être traitées pour un affichage en temps réel. pour être vérifié, plusieurs acceptations et vérifications sont effectuées ici Can.

<?php
$q=$_GET["q"];
$q = urldecode($q);

if (strlen($q) > 0)
{
 $conn = @mysql_connect("localhost","root","1010") or die ("MySql连接错误");
 mysql_select_db("xin",$conn);
 mysql_query("set names &#39;utf8&#39;");
 
 $sql = "SELECT username FROM message WHERE username = &#39;$q&#39;";
 $query = mysql_query($sql);
 @$row = mysql_fetch_array($query);
 
 if(!empty($row[&#39;username&#39;]))
 {
 $response = "<font color=red>已经被注册！</font>";
 }else
 {
 $response = "<font color=blue>恭喜！可以注册！</font>";
 }
 
 echo $response;
}

?>

index.html :Ceci est le fichier frontal. Ce fichier est relativement simple. Le fichier de traitement .js est appelé et le fichier à soumettre pour vérification sans actualisation est soumis à conn.php et à l'arrière-plan pour la connexion.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="ajax.js"></script> 
</head>
<body bgcolor="#999999">
<center>
<form> 
<table>
 <tr>
 <td>用户名：</td>
 <td><input type="text" id="txt1" onKeyUp="showHint(this.value)"></td>
 </tr>
 <tr align="center">
 <td colspan="2"><span id="txtHint"></span></td>
 </tr>
</table>
</form>
</center>
</body>
</html>

Bibliothèque.txt :Voici le fichier de la base de données SQL Importez ce fichier dans la base de données mysql C'est tout. .

DROP DATABASE IF EXISTS `xin`;
CREATE DATABASE `xin` /*!40100 DEFAULT CHARACTER SET utf8 */;
USE `xin`;


CREATE TABLE `message` (
 `id` int(11) NOT NULL auto_increment,
 `username` varchar(20) default NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

Enregistrez ces fichiers dans le répertoire racine où vous pouvez exécuter les fichiers PHP. L'URL de test est localhost/index.html. l'ensemble complet de fichiers pour le téléchargement du package. Essayez de le modifier selon le module d'enregistrement dont vous avez besoin, comme l'ajout d'un mot de passe, d'un nom, etc.

Résumé : Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Recommandations associées :

phpExplication détaillée de l'utilisation d'expressions régulières pour obtenir l'URL dans une chaîne

phpExplication détaillée d'exemples de langues correspondantes preg_match dans différents pays

Explication détaillée d'exemples d'implémentation de PHP+ajax de vérification des antécédents de connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!