Tutoriel de base sur le développement PHP AJAX et PHP

Exemples AJAX et PHP

Résumé en une phrase : AJAX est utilisé pour créer des applications plus interactives

L'exemple suivant montrera comment la page Web communique avec le serveur Web lorsque l'utilisateur saisit des caractères dans la zone de saisie :

L'effet de page est affiché dans l'image de droite

Explication des exemples - Page HTML

Lorsque l'utilisateur tape des caractères dans la zone de saisie ci-dessus, la fonction "showHint()" sera exécutée. Cette fonction est déclenchée par l'événement "onkeyup" :

Remarque : l'événement onkeyup se produit lorsque la touche du clavier est relâchée

Le code spécifique est le suivant

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str){
	//如果输入框是空的（str.length==0），该函数会清空 txtHint 占位符的内容，并退出该函数。
	if(str.length==0){
		document.getElementById("txtHint").innerHTML="";
		return;
	}
	//如果输入框不是空的，那么 showHint() 会执行以下代码：
	//创建XMLHttpRequest对象
	if(window.XMLHttpRequest){
		//IE7,Firefox,Chrome,Opera,Safari 浏览器执行的代码
		xmlhttp=new XMLHttpRequest();
	}else{
		//IE6,IE5浏览器执行的代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	//在服务器响应的时候执行的函数
	xmlhttp.onreadystatechange=function(){
		if(xmlhttp.readyState==4&&xmlhttp.status==200){
			document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
		}
	}
	//向服务器上的文件发送请求
	xmlhttp.open("GET","2.php?q="+str,true);
	xmlhttp.send();
}
</script>
</head>
<body>
<p><b>在输入框中输入一个姓名</b></p>
<form>
<!-- onkeyup 事件会在键盘按键被松开时发生，键盘松开时，调用showHint()函数-->
姓名：<input type="text" onkeyup="showHint(this.value)">
<p>返回值：<span id="txtHint"></span></p>
</form>
</body>
</html>

Explication du code source :

Si la zone de saisie est vide (str.length==0), cette fonction effacera le contenu de l'espace réservé txtHint et quittera la fonction.

Si la zone de saisie n'est pas vide, alors showHint() effectuera les étapes suivantes :

Créer un objet XMLHttpRequest

Créer une fonction à exécuter lorsque le serveur répond est prêt

Envoyer une requête vers un fichier sur le serveur

Veuillez noter le paramètre (q) ajouté à la fin de l'URL (contient le contenu de la zone de saisie)

Explication des exemples - Fichier PHP

La page serveur appelée ci-dessus via JavaScript est un fichier PHP nommé "2.php".

Le code source dans "2.php" vérifiera le tableau de noms puis renverra le nom correspondant au navigateur. Le code est le suivant :

<?php
// 将姓名填充到数组中
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
$a[]="小明";

//从请求URL地址中获取 q 参数
$q=$_GET["q"];

//查找是否由匹配值， 如果 q>0
if (strlen($q) > 0)
{
	$hint="";
	for($i=0; $i<count($a); $i++)
	{
		//将$a数组和$q全部转换为小写，然后逐个取出$a,截取与$q相同长度，比较是否相同，相同放入$hint中
		if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
		{
			if ($hint=="")
			{
				$hint=$a[$i];
			}
			else
			{
				$hint=$hint." , ".$a[$i];
			}
		}
	}
}

// 如果没有匹配值设置输出为 "no suggestion" 
if ($hint == "")
{
	$response="no suggestion";
}
else
{
	$response=$hint;
}

//输出返回值
echo $response;
?>

Explication : <🎜. >

Si JavaScript envoie du texte (c'est-à-dire strlen($q) > 0), ceci se produit :

Trouver les noms qui correspondent aux caractères envoyés par JavaScript

Si non une correspondance est trouvée, puis définissez la chaîne de réponse sur "aucune suggestion"

Si un ou plusieurs noms correspondants sont trouvés, définissez la chaîne de réponse avec tous les noms

Envoyez la réponse au "txtHint " espace réservé

Expérience d'apprentissage

Cet exemple comprend principalement les points de connaissances suivants :

Bases du formulaire
Événement Onkeyup : lorsque la touche du clavier est publié
appels de fonctions, transferts de valeurs de fonctions
création d'objets AJAX XMLHttpRequest, fonctions exécutées lorsque le serveur répond et transfert de valeurs au serveur Demande d'envoi de fichier : Voir 1-5 pour l'expérience d'apprentissage
Méthode HTML DOM getElementById() : Renvoie une référence au premier objet avec l'ID spécifié
Méthode d'affectation de tableau
Obtenir la soumission du formulaire de méthode

Fonctions liées aux chaînes :

strlen()
count()
Strtolower()

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function showHint(str){ //如果输入框是空的（str.length==0），该函数会清空 txtHint 占位符的内容，并退出该函数。 if(str.length==0){ document.getElementById("txtHint").innerHTML=""; return; } //如果输入框不是空的，那么 showHint() 会执行以下代码： //创建XMLHttpRequest对象 if(window.XMLHttpRequest){ //IE7,Firefox,Chrome,Opera,Safari 浏览器执行的代码 xmlhttp=new XMLHttpRequest(); }else{ //IE6,IE5浏览器执行的代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } //在服务器响应的时候执行的函数 xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } //向服务器上的文件发送请求 xmlhttp.open("GET","2.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <p><b>在输入框中输入一个姓名</b></p> <form>  姓名：<input type="text" onkeyup="showHint(this.value)"> <p>返回值：<span id="txtHint"></span></p> </form> </body> </html>

soumettre Réinitialiser le code

Opération automatique