PHP - AJAX contre PHP

PHP - AJAX vs PHP

AJAX est utilisé pour créer des applications plus interactives.

Exemple AJAX PHP

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 :

QQ图片20161010101254.png

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

<html>
<head>
<script>
function showHint(str)
{
         if (str.length==0)
         {
                 document.getElementById("txtHint").innerHTML="";
                 return;
         }
         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","gethint.php?q="+str,true);
         xmlhttp.send();
}
</script>
</head>
<body>
 
<p><b>在输入框中输入一个姓名:</b></p>
<form>
姓名: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>返回值: <span id="txtHint"></span></p>
 
</body>
</html>

Explication du code source :

Si la zone de saisie est vide (str.length==0), cette fonction effacera l'espace réservé txtHint contenu et quittez 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 la réponse du serveur est prête

· Envoyer une requête au fichier sur le serveur

· Veuillez faire attention au paramètre (q) ajouté à la fin de l'URL (contient le contenu de l'entrée box)

Fichier PHP

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

Le code source dans "gethint.php" vérifie le tableau de noms et renvoie le nom correspondant au navigateur :

<?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";
 
//从请求URL地址中获取 q 参数
$q=$_GET["q"];
 
//查找是否由匹配值， 如果 q>0
if (strlen($q) > 0)
{
         $hint="";
         for($i=0; $i<count($a); $i++)
         {
                 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), puis :

1. Recherchez les noms correspondant aux caractères envoyés par JavaScript

2 Si aucune correspondance n'est trouvée, définissez la chaîne de réponse sur "aucune suggestion"

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

4 Envoyez la réponse à l'espace réservé "txtHint"

Solution du problème inter-domaines PHP Ajax <. 🎜>

Si votre requête asynchrone doit traverser le domaine, vous pouvez consulter : Solution aux problèmes inter-domaines PHP Ajax.

Formation continue

nouveau fichier

<html> <head> <script> function showHint(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } 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","gethint.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <p><b>在输入框中输入一个姓名:</b></p> <form> 姓名: <input type="text" onkeyup="showHint(this.value)"> </form> <p>返回值: <span id="txtHint"></span></p> </body> </html>

soumettre Réinitialiser le code

Opération automatique

PHP - AJAX contre PHP

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]