Comment transmettre un tableau à JS en utilisant PHP et traiter les données

Lors du développement récent d'applications Web, le transfert de données entre PHP et JS est souvent impliqué, notamment le transfert de structures de données complexes telles que des tableaux. Cet article explique principalement comment utiliser PHP pour transmettre des tableaux à JS et utiliser ces données dans JS.

1. Convertir un tableau PHP au format JSON

En PHP, nous pouvons directement utiliser des tableaux pour stocker des données. Mais en JS, les tableaux sont généralement représentés au format JSON (JavaScript Object Notation). JSON est un format d'échange de données léger, facile à comprendre et à traiter. Donc avant de passer le tableau PHP à JS, nous devons convertir le tableau au format JSON.

PHP fournit une fonction intégrée json_encode() qui peut convertir les tableaux PHP au format JSON. L'exemple de code est le suivant :

<?php
$array = array(
    &#39;name&#39; => '张三',
    'age' => 25,
    'interests' => array('篮球', '游泳', '音乐')
);
$json = json_encode($array);
echo $json;
?>

Dans le code ci-dessus, nous définissons un tableau associatif $array, le convertissons au format JSON et utilisons l'instruction echo pour afficher le JSON à l'écran. Le résultat de sortie est le suivant :

{"name":"张三","age":25,"interests":["篮球","游泳","音乐"]}

2. Analyser les données JSON dans JS

Dans JS, nous pouvons utiliser l'objet JSON intégré pour analyser les données JSON. Il existe deux méthodes principales dans les objets JSON : parse() et stringify(). Parmi elles, la méthode parse() est utilisée pour analyser les chaînes JSON et les convertir en objets ou tableaux JS ; et la méthode stringify() est utilisée pour convertir des objets ou tableaux JS en chaînes JSON ;

Voici un exemple de code qui utilise la méthode JSON.parse() pour analyser la sortie des données JSON dans la section précédente :

var json = '{"name":"张三","age":25,"interests":["篮球","游泳","音乐"]}';
var obj = JSON.parse(json);
console.log(obj.name);          //输出：张三
console.log(obj.age);           //输出：25
console.log(obj.interests[0]);  //输出：篮球

Dans le code ci-dessus, nous définissons une chaîne JSON json et utilisons la méthode JSON.parse() pour analyser dans un objet JS obj. Ensuite, nous pouvons obtenir les données du tableau en accédant aux propriétés de obj.

Il convient de noter que si le format de chaîne JSON est incorrect, la méthode parse() lèvera une exception.

3. Transmettez les données JSON à JS

Maintenant, nous savons déjà comment convertir des tableaux au format JSON en PHP et analyser les données JSON en JS. Voyons ensuite comment transmettre des données JSON à JS.

Il existe deux manières courantes de transmettre des données JSON à JS : en utilisant directement la chaîne JSON comme variable JS ou en utilisant la technologie AJAX pour obtenir les données JSON du serveur.

1. Utiliser des chaînes JSON comme variables JS

Cette méthode convient aux situations où nous avons déjà une chaîne JSON. Nous pouvons utiliser des chaînes JSON directement comme variables JS.

Voici un exemple de code pour utiliser une chaîne JSON comme variable JS :

<?php
$array = array(
    &#39;name&#39; => '张三',
    'age' => 25,
    'interests' => array('篮球', '游泳', '音乐')
);
$json = json_encode($array);
?>
<script type="text/javascript">
var json = '<?php echo $json; ?>';
var obj = JSON.parse(json);
console.log(obj.name);          //输出：张三
console.log(obj.age);           //输出：25
console.log(obj.interests[0]);  //输出：篮球
</script>

Dans le code ci-dessus, nous avons généré une chaîne JSON dans le code PHP et l'avons transmise à une variable JavaScript json. Ensuite, nous utilisons la méthode JSON.parse() pour analyser la chaîne json et obtenir les données dans le tableau en accédant aux propriétés d'obj.

Il est à noter que si la chaîne JSON contient des caractères spéciaux, tels que des guillemets simples, des guillemets doubles, etc., cela peut provoquer des erreurs de code JS. Pour éviter cela, nous devons utiliser des caractères d'échappement dans la chaîne JSON.

2. Utilisez AJAX pour obtenir des données JSON

Si les données JSON doivent être obtenues dynamiquement à partir du serveur, nous pouvons utiliser la technologie AJAX (JavaScript et XML asynchrones). AJAX peut envoyer une requête au serveur et obtenir des données sans actualiser la page, puis afficher les données sur la page.

Voici un exemple de code pour obtenir des données JSON en utilisant AJAX :

<?php
$array = array(
    &#39;name&#39; => '张三',
    'age' => 25,
    'interests' => array('篮球', '游泳', '音乐')
);
$json = json_encode($array);
?>
<script type="text/javascript">
//创建XMLHttpRequest对象
var xhr;
if(window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();  //IE7+、Firefox、Chrome、Opera、Safari
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");  //IE6、IE5
}

//发送AJAX请求
xhr.open('GET', 'get_json.php');
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        var json = xhr.responseText;
        var obj = JSON.parse(json);
        console.log(obj.name);          //输出：张三
        console.log(obj.age);           //输出：25
        console.log(obj.interests[0]);  //输出：篮球
    }
}
xhr.send();
</script>

Dans le code ci-dessus, nous créons une requête AJAX à l'aide de l'objet XMLHttpRequest. Ensuite, nous ouvrons la connexion de requête en appelant la méthode open(), définissons la méthode de requête sur GET et définissons l'URL demandée sur get_json.php. Ensuite, nous configurons la fonction de gestion des événements onreadystatechange pour traiter les données renvoyées lorsque l'état de la requête AJAX change. Enfin, nous avons envoyé la requête AJAX en appelant la méthode send().

Il convient de noter que lors de l'utilisation de requêtes AJAX, nous devons nous assurer que l'URL demandée est correcte et que le serveur peut analyser correctement les paramètres de la requête et renvoyer les données au format JSON.

4. Résumé

Dans le développement d'applications Web, nous devons souvent transmettre des structures de données complexes (telles que des tableaux) de PHP vers JS. Pour atteindre cet objectif, nous pouvons convertir le tableau PHP au format JSON puis analyser les données JSON dans JS. Nous introduisons ici deux méthodes pour transmettre des données JSON : utiliser des chaînes JSON directement en tant que variables JS ou utiliser la technologie AJAX pour obtenir des données JSON à partir du serveur. Dans le développement réel, nous devons choisir la méthode appropriée en fonction de la situation spécifique afin d'obtenir une transmission efficace des données.

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!