Comment l'ajax de jquery passe un tableau en arrière-plan

jQuery est un framework JavaScript frontal populaire qui fournit des fonctionnalités et des composants riches, dont Ajax. En Ajax, nous devons souvent transmettre des données en arrière-plan, qu'il s'agisse d'une valeur unique ou de plusieurs valeurs. Cet article explique comment utiliser Ajax de jQuery pour passer un tableau en arrière-plan.

1. Sérialisation des tableaux

Avant de transmettre le tableau, il doit être sérialisé dans un format transportable. Vous pouvez utiliser la méthode $.param() de jQuery pour sérialiser un tableau en une chaîne au format "nom=valeur". Par exemple :

var arr = [1, 2, 3];
var param = $.param({ data: arr }); // "data%5B%5D=1&data%5B%5D=2&data%5B%5D=3"

Dans l'exemple ci-dessus, nous avons d'abord défini un tableau arr, qui contient trois valeurs. Nous appelons ensuite la méthode $.param() pour sérialiser le tableau en une chaîne contenant un paramètre nommé « data ». La valeur de ce paramètre est le résultat sérialisé d'un tableau. Enfin, la variable param que nous obtenons contient une chaîne sérialisée.

2. Passer la chaîne sérialisée

Maintenant que nous avons sérialisé le tableau en chaîne, nous pouvons utiliser Ajax pour passer cette chaîne en arrière-plan. Vous pouvez utiliser la méthode $.ajax() de jQuery pour envoyer une requête POST et utiliser la chaîne sérialisée comme paramètre de requête. Par exemple :

var arr = [1, 2, 3];
var param = $.param({ data: arr });
$.ajax({
    url: "example.php",
    type: "POST",
    data: param,
    success: function(result) {
        console.log(result);
    }
});

Dans l'exemple ci-dessus, nous avons appelé la méthode $.ajax(), en passant certains paramètres d'option. Parmi eux, url représente l'URL demandée, type représente le type de requête comme POST, data représente les paramètres de la requête et success représente la fonction de rappel exécutée une fois la requête réussie. Dans cet exemple, nous transmettons la chaîne sérialisée à Ajax en tant que paramètre de requête.

3. Recevoir le tableau renvoyé par l'arrière-plan

En arrière-plan, nous devons analyser les paramètres de requête reçus et extraire les données du tableau sérialisé. Cette tâche peut être accomplie en utilisant la fonction parse_str() en PHP. Par exemple :

$data = array();
parse_str($_POST['data'], $data);

Dans l'exemple ci-dessus, nous définissons d'abord un tableau vide $data, puis utilisons la fonction parse_str() pour extraire le paramètre nommé "data" du tableau $_POST. La fonction parse_str() analysera cette chaîne sérialisée dans un tableau PHP et la stockera dans la variable $data. Désormais, nous pouvons utiliser ce tableau sous le capot pour effectuer diverses opérations.

4. Exemple complet

Maintenant, voyons un exemple complet qui montre comment passer un tableau en arrière-plan et recevoir sa réponse à l'aide de l'Ajax de jQuery :

var arr = [1, 2, 3];
var param = $.param({ data: arr });
$.ajax({
    url: "example.php",
    type: "POST",
    data: param,
    success: function(result) {
        console.log(result); // ["1", "2", "3"]
    }
});

$data = array();
parse_str($_POST['data'], $data);
$response = json_encode($data['data']);
echo $response;

Dans cet exemple, nous définissons d'abord un tableau arr, il contient trois valeurs. Ensuite, nous utilisons la méthode $.param() pour le sérialiser en un paramètre de chaîne. Ensuite, nous utilisons la méthode $.ajax() pour envoyer une requête POST à ​​"example.php", et le paramètre de requête est la chaîne param.

Sous le capot, nous avons analysé les paramètres de la requête à l'aide de la fonction parse_str() et les avons convertis en un tableau PHP $data. Nous utilisons ensuite la fonction json_encode() pour convertir ce tableau en une chaîne au format JSON et la renvoyer comme réponse.

Sur le front-end, nous utilisons la fonction de rappel de réussite de jQuery pour recevoir la réponse. Dans cet exemple, la réponse est un tableau contenant trois chaînes. Nous l'envoyons à la console pour vérifier.

Avec cet exemple complet, vous devriez avoir compris comment utiliser l'Ajax de jQuery pour passer un tableau en arrière-plan et recevoir sa réponse. Cet exemple peut vous aider à appliquer ces techniques dans un développement réel.

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!