fonction de vérification en temps réel de l'enregistrement php ajax-PHP开发-php.cn

fonction de vérification en temps réel de l'enregistrement php ajax

高洛峰

Libérer： 2016-12-23 17:35:56

original

1330 Les gens l'ont consulté

La technologie de vérification en temps réel d'ajax est 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. C'est formidable pour l'expérience d'enregistrement des utilisateurs. Comparer Un mode de vérification qui ne peut pas être connecté à l'arrière-plan sans être actualisé en temps opportun doit revenir à l'actualisation, ce qui est très peu convivial pour l'expérience utilisateur.

Le mode ajax est une exigence 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 et d'autres combinaisons Ceci est principalement expliqué ici pour 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 de base de la technologie ajax. Il affiche principalement des invites de vérification de temps en temps. Ce fichier n'a généralement pas besoin d'être modifié et doit uniquement ê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;
}

Copier après la connexion

conn.php : Il s'agit du fichier de configuration du site Web Pour configurer votre nom d'utilisateur et votre mot de passe mysql local, vous devez configurer la connexion entre PHP et la base de données. Connexion à la base de données PHP MYSQL. De plus, vous devez configurer la connexion entre PHP et la base de données. Les données reçues sont traitées et affichées en temps réel. S'il y a plusieurs documents à vérifier, plusieurs acceptations et vérifications peuvent être effectuées ici.

<?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;
}
 
?>

Copier après la connexion

index.html : Il s'agit du fichier frontal. Ce fichier est relativement plus simple. Il appelle le fichier de traitement ajax.js et soumet le fichier pour une vérification sans actualisation à conn.php Connect. à l'arrière-plan.

<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>

Copier après la connexion

Bibliothèque.txt : Il s'agit du fichier de base de données SQL. Importez simplement ce fichier dans la base de données MySQL.

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;

Copier après la connexion

Enregistrez ces fichiers dans le répertoire racine où les fichiers PHP peuvent être exécutés. L'URL de test est localhost/index.html Ce qui suit est l'ensemble complet des fichiers téléchargés dans un package. pour répondre à vos besoins, module d'inscription, tel que l'ajout d'un mot de passe, d'un nom, etc.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. J'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles liés à la fonction de vérification en temps réel de l'enregistrement php ajax, veuillez faire attention au site Web PHP chinois !