Comment passer un tableau php à js

Alors que la tendance à la séparation du front-end et du back-end continue de se renforcer, il existe de plus en plus de cas où le front-end doit interagir avec le back-end pour les données. Dans ce cas, le front-end doit être en mesure de faire traiter les données par le back-end, qui renvoie généralement les données sous la forme d'un tableau. Par conséquent, comment transmettre des tableaux PHP à JS est devenu une question très importante.

Cet article présentera plusieurs méthodes courantes de transmission de tableaux PHP, afin que les lecteurs puissent obtenir et traiter plus facilement les données renvoyées par le backend lors de l'interaction avec les données front-end et back-end. La méthode spécifique est la suivante :

Méthode 1 : Utiliser JSON

Actuellement, la solution la plus courante pour l'interaction des données front-end et back-end consiste à utiliser JSON. JSON (JavaScript Object Notation) est un format d'échange de données léger, facile à lire et à écrire, et facile à analyser et à générer par les machines, ce qui le rend très approprié pour l'échange de données. PHP a une fonction intégrée json_encode() qui peut convertir un tableau PHP au format JSON, puis le transférer vers le front-end à l'aide de la technologie AJAX, puis utiliser JSON.parse() pour le convertir en un objet que JavaScript peut manipuler directement. .

Utilisez le code PHP pour convertir le tableau en JSON :

$myArray = array("name" => "Tom", "age" => "18", "gender" => "male");
$json = json_encode($myArray);

Utilisez AJAX sur le front-end pour obtenir les données JSON :

var request = new XMLHttpRequest();
request.open('GET', 'my_array.php', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    var data = JSON.parse(request.responseText);
    console.log(data);
  } else {
    console.log("Error!");
  }
};

request.send();

Dans ce qui précède code, nous avons utilisé l'objet XMLHttpRequest demande des données au serveur et utilise la méthode JSON.parse() pour convertir la chaîne au format JSON obtenue en un objet JavaScript.

Méthode 2 : utilisez Serialize() et unserialize()

Si nous n'avons pas besoin de prendre en compte la structure des données lors de la transmission des données, alors Serialize() et unserialize() La fonction serait un bon choix. La fonction

serialize() sérialise la variable en une chaîne, et la fonction unserialize() peut restaurer la chaîne au type de données d'origine. En PHP, nous pouvons utiliser serialize() pour sérialiser un tableau en chaîne, puis utiliser AJAX pour obtenir les données puis les désérialiser.

Utilisez le code PHP pour sérialiser le tableau :

$myArray = array("name" => "Tom", "age" => "18", "gender" => "male");
$serializedData = serialize($myArray);

Utilisez AJAX sur le front-end pour obtenir la chaîne sérialisée :

var request = new XMLHttpRequest();
request.open('GET', 'my_array.php', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    var data = request.responseText;
    console.log(data);
  } else {
    console.log("Error!");
  }
};

request.send();

Ensuite, nous pouvons Utilisez la méthode unserialize() pour le désérialiser en un objet PHP :

$unserializedData = unserialize($serializedData);
print_r($unserializedData);

Méthode 3 : Utiliser les attributs HTML5 data-*

Si nous n'avons besoin de transmettre que quelques données simples, Il n'est pas nécessaire d'utiliser des requêtes AJAX, le tableau PHP peut donc être transmis au front-end via l'attribut HTML5 data-. L'attribut data- est un attribut personnalisé qui peut être utilisé pour stocker des données personnalisées d'éléments de page afin d'implémenter la liaison de données sur le front-end. Nous pouvons d'abord définir un attribut data-* sur un élément HTML, puis convertir les données en chaîne au format JSON en PHP, et enfin utiliser PHP pour les afficher sur la page.

Utilisez le code PHP pour convertir le tableau en JSON et le sortir dans l'attribut data-* :

$myArray = array("name" => "Tom", "age" => "18", "gender" => "male");
$json = json_encode($myArray);

echo '
This is my div
';

Ensuite, nous pouvons obtenir cet élément via JavaScript et ajouter les données- Attribut json analysé dans des objets JavaScript :

var myDiv = document.getElementById("myDiv");
var jsonData = JSON.parse(myDiv.dataset.json);
console.log(jsonData);

Méthode 4 : Utiliser AjaxTransport

Parfois, lorsque nous interagissons avec des données front-end et back-end, nous devons personnaliser certains paramètres pour faciliter le traitement back-end. Dans ce cas, vous pouvez utiliser AjaxTransport dans jQuery. AjaxTransport nous permet d'effectuer certaines opérations personnalisées avant d'envoyer la requête AJAX, comme l'ajout d'un paramètre personnalisé dans l'en-tête de la requête pour faciliter le traitement backend des tableaux PHP.

Utilisez le code PHP pour convertir le tableau en JSON :

$myArray = array("name" => "Tom", "age" => "18", "gender" => "male");
$json = json_encode($myArray);

Lorsque l'utilisateur envoie une requête AJAX, nous pouvons ajouter ces données JSON à l'en-tête de la requête :

$.ajaxTransport("+json", function(options, originalOptions, xhr) {
  xhr.setRequestHeader("X-JSON", json);
});

# 🎜🎜#Dans le backend PHP, nous pouvons obtenir le tableau PHP en fonction des paramètres personnalisés ajoutés dans l'en-tête de la requête :

$myArray = json_decode($this->request->header('X-JSON'));

Pour résumer, nous pouvons utiliser diverses méthodes pour transférer le Tableau PHP en JavaScript, la solution la plus appropriée doit être choisie en fonction de la situation spécifique. Dans l’ensemble, la maîtrise de ces méthodes peut permettre aux développeurs d’interagir avec les données front-end et back-end de manière plus flexible et d’améliorer l’efficacité du développement.

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!