ajax implémente deux tableaux de passage php

Ces dernières années, avec le développement rapide de la technologie Internet, de plus en plus de sites Web ont commencé à utiliser Ajax pour améliorer l'expérience utilisateur. Cet article explique comment implémenter le transfert de tableau entre deux fichiers php via Ajax.

1. Qu'est-ce qu'Ajax

Ajax (JavaScript et XML asynchrones), c'est-à-dire JavaScript et XML asynchrones, est une technologie utilisée pour créer des pages Web dynamiques et rapides. Ajax permet aux pages Web d'être mises à jour de manière asynchrone en échangeant une petite quantité de données avec le serveur en arrière-plan. Cela signifie que certaines parties d'une page peuvent être mises à jour sans recharger la page entière. Cela peut améliorer la vitesse de réponse de la page et augmenter l'expérience utilisateur.

2. Qu'est-ce qu'un tableau

Un tableau est un ensemble ordonné de variables, qui peuvent être de n'importe quel type de données, y compris des chaînes, des nombres, des objets, etc. Un tableau peut stocker plusieurs valeurs et chaque valeur est accessible via un index unique.

3. Utilisez Ajax pour transmettre des tableaux

Étape 1 : Créez deux fichiers php, un pour envoyer des tableaux (send.php) et un pour recevoir des tableaux (receive.php).

Code du fichier send.php :

<?php
$array = array("name" => "Tom", "age" => "25", "gender" => "male");
echo json_encode($array);
?>

code du fichier receive.php :

<?php
$data = $_POST['data'];
$array = json_decode($data, true);
echo "姓名：" . $array['name'] . "<br>";
echo "年龄：" . $array['age'] . "<br>";
echo "性别：" . $array['gender'] . "<br>";
?>

Étape 2 : Utilisez l'objet XMLHttpRequest pour créer une requête Ajax.

var xhr = new XMLHttpRequest();

Étape 3 : Utilisez la méthode open() pour ouvrir une requête.

xhr.open("POST", "receive.php", true);

Étape 4 : Définissez les en-têtes de requête HTTP.

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

Étape cinq : configurez le gestionnaire d'événements onreadystatechange pour effectuer les actions appropriées lorsque le serveur répond.

xhr.onreadystatechange = function() {
   if (xhr.readyState == 4 && xhr.status == 200) {
        document.getElementById("result").innerHTML = xhr.responseText;
   }
};

Étape 6 : Encodez les données à envoyer au format URL.

var data = "data=" + encodeURIComponent(JSON.stringify(array));

Étape 7 : Envoyer la demande.

xhr.send(data);

4. Application pratique

Ce qui suit est un exemple spécifique qui montre comment utiliser Ajax pour transférer un tableau entre deux fichiers php. Supposons que nous ayons un formulaire dans lequel l'utilisateur saisit son nom, son âge, son sexe et d'autres informations, puis soumet le formulaire. Ces informations sont envoyées au fichier send.php via Ajax, puis renvoyées au fichier recevoir.php et finalement affichées.

Le code est le suivant :

<script>
   function sendArray() {
      var array = {};
      array['name'] = document.getElementById('name').value;
      array['age'] = document.getElementById('age').value;
      array['gender'] = document.getElementById('gender').value;

      var xhr = new XMLHttpRequest();
      xhr.open(&quot;POST&quot;, &quot;receive.php&quot;, true);
      xhr.setRequestHeader(&quot;Content-Type&quot;, &quot;application/x-www-form-urlencoded&quot;);
      xhr.onreadystatechange = function() {
         if (xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById("result").innerHTML = xhr.responseText;
         }
      };
      var data = &quot;data=&quot; + encodeURIComponent(JSON.stringify(array));
      xhr.send(data);
   }
</script>


   

      姓名：

      年龄：

      性别：
         男
         女
      

      
   
   

receive.php code du fichier :

<?php
$data = $_POST['data'];
$array = json_decode($data, true);
echo "姓名：" . $array['name'] . "<br>";
echo "年龄：" . $array['age'] . "<br>";
echo "性别：" . $array['gender'] . "<br>";
?>

5. Résumé

Cet article présente comment utiliser Ajax pour transmettre des tableaux et démontre le processus de mise en œuvre spécifique à travers un exemple pratique. Ajax peut non seulement améliorer la vitesse de réponse des pages Web, mais également optimiser l'expérience utilisateur. En étudiant cet article, je pense que tout le monde aura une compréhension et une connaissance plus approfondies des applications d'Ajax et de la transmission par réseau.

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!