Maison développement back-end tutoriel php php+ajax注册实时验证功能_php实例

php+ajax注册实时验证功能_php实例

Aug 04, 2016 am 08:56 AM

ajax的实时验证技术已经很成熟了,在一些规范的网站上,如果有注册验证的模板,必定会涉及到ajax的无刷新验证,这在用户注册的体验中是很棒的,对比一个不能及时和后台无刷新对接的验证模式,要重新返回来刷新,这对于用户来说,体验上是很不友好的。

ajax的模式几乎是所有站点应用的需求,ajax作为前端无刷新验证,可以和所有后台语言进行组合使用,比如asp+ajax,php+ajax,.net+ajax等等组合,这里主要讲解的是php+ajax的注册验证。

下面的验证是一个完整的实例,我们在网站上面注册时,在输入用户名时,首先要进行无刷新验证,要验证一下后台数据库里面是否存在同名的数据,如果存在,则无刷新显示用户名已被占用的提示,这里一共涉及到四个文件。

ajax.js:ajax技术的核心文件了,主要是验证提示的时时显示,这个文件通常不需要进行修改,只需要进行前端调用即可。

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:这是网站的配置文件,要配置好自己本地的mysql用户名和密码,需要配置PHP与数据库的连接,可以参考PHP+MYSQL数据库连接的文章,另外要处理接受过来的数据进行时实显示,如果有多项要验证的文件,在这里进行多项接受和验证即可。

<&#63;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 'utf8'");
 
 $sql = "SELECT username FROM message WHERE username = '$q'";
 $query = mysql_query($sql);
 @$row = mysql_fetch_array($query);
 
 if(!empty($row['username']))
 {
 $response = "<font color=red>已经被注册!</font>";
 }else
 {
 $response = "<font color=blue>恭喜!可以注册!</font>";
 }
 
 echo $response;
}

&#63;>

Copier après la connexion

index.html:这就是前端文件了,这个文件相对来说要更简单一些,调用了ajax.js的处理文件,将要提交无刷新验证的文件提交到conn.php和后台进行连接。

<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

库.txt:这个就是SQL的数据库文件了,将这个文件导入到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

将这几个文件保存在可以运行PHP文件的根目录即可,测试网址为 localhost/index.html,下面是打包下载的整套文件,试着修改为自己需求的注册模块,比如加上密码,姓名之类的。

源码下载:http://xiazai.php.net/201607/yuanma/php+ajaxzhuce(php.net).rar

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

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

11 meilleurs scripts de raccourcissement d'URL PHP (gratuit et premium) 11 meilleurs scripts de raccourcissement d'URL PHP (gratuit et premium) Mar 03, 2025 am 10:49 AM

Les longues URL, souvent encombrées de mots clés et de paramètres de suivi, peuvent dissuader les visiteurs. Un script de raccourcissement d'URL offre une solution, créant des liens concis idéaux pour les médias sociaux et d'autres plateformes. Ces scripts sont utiles pour les sites Web individuels

Travailler avec les données de session Flash dans Laravel Travailler avec les données de session Flash dans Laravel Mar 12, 2025 pm 05:08 PM

Laravel simplifie la gestion des données de session temporaires à l'aide de ses méthodes de flash intuitives. Ceci est parfait pour afficher de brefs messages, alertes ou notifications dans votre application. Les données ne persistent que pour la demande ultérieure par défaut: $ demande-

Construisez une application React avec un Laravel Back End: Partie 2, React Construisez une application React avec un Laravel Back End: Partie 2, React Mar 04, 2025 am 09:33 AM

Il s'agit de la deuxième et dernière partie de la série sur la construction d'une application React avec un back-end Laravel. Dans la première partie de la série, nous avons créé une API RESTful utilisant Laravel pour une application de liste de base sur le produit. Dans ce tutoriel, nous serons Dev

Misque de réponse HTTP simplifié dans les tests Laravel Misque de réponse HTTP simplifié dans les tests Laravel Mar 12, 2025 pm 05:09 PM

Laravel fournit une syntaxe de simulation de réponse HTTP concise, simplifiant les tests d'interaction HTTP. Cette approche réduit considérablement la redondance du code tout en rendant votre simulation de test plus intuitive. L'implémentation de base fournit une variété de raccourcis de type de réponse: Utiliser illuminate \ support \ faades \ http; Http :: faux ([[ 'google.com' => 'Hello World', 'github.com' => ['foo' => 'bar'], 'forge.laravel.com' =>

Curl dans PHP: Comment utiliser l'extension PHP Curl dans les API REST Curl dans PHP: Comment utiliser l'extension PHP Curl dans les API REST Mar 14, 2025 am 11:42 AM

L'extension PHP Client URL (CURL) est un outil puissant pour les développeurs, permettant une interaction transparente avec des serveurs distants et des API REST. En tirant parti de Libcurl, une bibliothèque de transfert de fichiers multi-protocol très respectée, PHP Curl facilite Efficient Execu

12 meilleurs scripts de chat PHP sur Codecanyon 12 meilleurs scripts de chat PHP sur Codecanyon Mar 13, 2025 pm 12:08 PM

Voulez-vous fournir des solutions instantanées en temps réel aux problèmes les plus pressants de vos clients? Le chat en direct vous permet d'avoir des conversations en temps réel avec les clients et de résoudre leurs problèmes instantanément. Il vous permet de fournir un service plus rapide à votre personnalité

Annonce de l'enquête sur la situation en 2025 PHP Annonce de l'enquête sur la situation en 2025 PHP Mar 03, 2025 pm 04:20 PM

L'enquête sur le paysage PHP 2025 étudie les tendances actuelles de développement du PHP. Il explore l'utilisation du cadre, les méthodes de déploiement et les défis, visant à fournir des informations aux développeurs et aux entreprises. L'enquête prévoit la croissance de la PHP moderne versio

Notifications à Laravel Notifications à Laravel Mar 04, 2025 am 09:22 AM

Dans cet article, nous allons explorer le système de notification dans le framework Web Laravel. Le système de notification de Laravel vous permet d'envoyer des notifications aux utilisateurs sur différents canaux. Aujourd'hui, nous discuterons de la façon dont vous pouvez envoyer des notifications OV

See all articles