Comment les données front-end et back-end devraient interagir scientifiquement

Cette fois, je vais vous montrer comment les données front-end et back-end doivent interagir scientifiquement. Quelles sont les précautions pour l'interaction des données front-end et back-end ? Voici des cas pratiques, jetons un coup d'oeil.

Assignation HTML

Assignation JS

le script remplit JSON

AJAX obtient JSON

WebSocket transmet les données en temps réel

Résumé

1. Sortie d'affectation HTML à la valeur ou au nom de données de l'élément

<div data-value="<?php echo $user_avatar;?>"></div>

Résultat du rendu

<div data-avatar="https://avatars1.githubusercontent.com/u/3949015?v=3&s=40"></div>

Utilisez JS pour obtenir $(' input'). val();

$('div').data('avatar');

Avantages : Il n'occupe pas de variables globales et peut être obtenu librement par JS.
Suggestions d'utilisation : convient pour passer des données simples, et également très approprié pour lier des relations entre plusieurs données simples et Element.

 <li>nimojs <span data-userid="1" >删除</span></li>
  <li>nimo22 <span data-userid="2" >删除</span></li>
  <li>nimo33 <span data-userid="3" >删除</span></li>
  <li>nimo44 <span data-userid="4" >删除</span></li>
  <li>nimo55 <span data-userid="5" >删除</span></li></ul><script>
  $(&#39;span&#39;).on(&#39;click&#39;,function(){ 
    $.post(&#39;/ajax/remove/&#39;,$(this).data(&#39;userid&#39;),function(data){ // ... })
  })</script>

2. L'affectation JS
remplit les données dans la déclaration de variable JavaScript de 3f1c4e4b6b16bbbd69b2ee476dc4f83a.

<script>
  var user_avatar = "<?php echo $user_avatar;?>";
  // 渲染结果
  // var user_avatar = "https://avatars1.githubusercontent.com/u/3949015?v=3&s=40";</script>

Ou utilisez le moteur de modèles backend Smarty  :

<script>
  var user_avatar = "{$user_avatar}";</script>

Avantages : La transmission de données est très pratique. Le front-end appelle directement la variable user_avatar pour utiliser les données.
Inconvénients :

Pour transférer une chaîne de données, la variable globale user_avatar est occupée. Lorsqu'il y a beaucoup de données à transmettre, de nombreuses variables globales seront occupées.

Si les données renvoyées contiennent des sauts de ligne, cela provoquera une erreur JS
// Le résultat du rendu comporte des sauts de ligne var user_id = "https://avatars1.githubusercontent.com/u/3949015?v =3&s=40" ;// Uncaught SyntaxError : jeton inattendu ILLEGAL

Optimisation : tout le contenu renvoyé par le backend peut être stocké dans une variable pointée, minimisant ainsi l'utilisation de variables globales. Exemple : // Code PHP var SERVER_DATA = { nom d'utilisateur : {$username}, identifiant d'utilisateur : {$userid}, titre : {$title}} // Résultat du rendu var SERVER_DATA = { nom d'utilisateur : "NimoChu", identifiant d'utilisateur : 1, titre : 'F2E'>

Suggestions d'utilisation : utilisez cette méthode lorsque vous devez transférer des données vers JS le plus rapidement possible et que vous êtes sûr que les données sont stables. Si le format des données est complexe, il est recommandé d'utiliser un script pour remplir JSON ou AJAX pour obtenir du JSON.

3. Le script remplit JSON*** La syntaxe JSON** remplit les données JSON dans la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a, et le frontal obtient la chaîne JSON via le DOM et l'analyse dans un objet.

<script type="text/template" id="data">{"username":"nimojs","userid":1}</script><script>
  var data = JSON.parse($(&#39;#data&#39;).html());  //{username:"nimojs",userid:1}</script>

Avantages : Les données peuvent être obtenues après le chargement de la page. Il n'occupe pas de variables globales et peut transmettre de grandes quantités de collections de données.
Inconvénients : Lorsque la quantité de données est particulièrement importante, le chargement initial de la page sera lent. Le ralentissement n'est pas seulement dû à la taille du fichier, mais également au fait qu'il faut du temps au serveur pour interroger les données et renvoyer la collection. Vous pouvez utiliser AJAX pour obtenir JSON afin d'effectuer le chargement à la demande et l'attente de chargement.
Suggestions d'utilisation : convient pour transmettre de grandes collections de données qui doivent être utilisées lors du chargement du DOM. Par exemple : le front-end contrôle le rendu de la page, le back-end remplit la source de données JSON dans 3f1c4e4b6b16bbbd69b2ee476dc4f83a et le front-end utilise un moteur de modèle JavaScript pour afficher la page. Comment choisir un moteur de template Javascript ?

4. AJAX obtient JSON Utilisez AJAX pour obtenir des données JSON

<span id="showdata">查看资料</span>
<div style="display:none;" id="box"> 
  <h2>用户信息</h2> 
  <p id="info">![](loading.gif)</p>
</div>
$(&#39;#showdata&#39;).on(&#39;click&#39;,function(){ 
  $(&#39;#box&#39;).show(); 
  $.getJSON(&#39;/ajax/userdata/&#39;,function(oData){ 
    // oData = {"username":"nimojs","userid":1} 
    $(&#39;#info&#39;).html(&#39;用户名：&#39; + oData.username + &#39;<br>用户ID：&#39; + oData.userid); 
  })
})

Ceci est un exemple d'obtention d'informations utilisateur via AJAX. Le processus est le suivant :

Seules les informations de visualisation sont affichées sur la page

L'utilisateur clique pour afficher les informations

Affiche les informations de l'utilisateur et charge les images

Envoie au serveur pour obtenir des informations sur l'utilisateur Requête AJAX

Le serveur renvoie une chaîne JSON, $.getJSON convertit automatiquement la chaîne JSON renvoyée en objet

Remplissez le contenu dans 4730362a714be16deabe5f3a72be307a

Avantages : il n'occupe pas de variables globales ni de nœuds DOM, et vous pouvez contrôler librement les conditions de déclenchement pour obtenir des données (lorsque la page est chargée, lorsque l'utilisateur clique pour afficher des informations, ou lorsque l'utilisateur clique sur un bouton). Lorsque vous commencez à obtenir des données, vous pouvez utiliser l'espace réservé de l'image de chargement pour indiquer à l'utilisateur que les données sont en cours de lecture. Empêche le chargement lent de la page causé par le chargement de toutes les données sur la page.

Inconvénients : Des requêtes HTTP supplémentaires seront générées. Il ne peut pas être obtenu immédiatement après le chargement du DOM. Il doit envoyer une requête et recevoir une réponse.

Suggestions d'utilisation : convient pour charger des informations non principales, définir des conditions de déclenchement (lorsque l'utilisateur clique pour afficher les informations) et fournir des invites d'attente conviviales pour la lecture des données.

5. WebSocket transmet les données en temps réel. Si les requêtes et les réponses AJAX sont comparées à l'envoi de messages texte au serveur et à l'attente que le serveur réponde aux messages texte, WebSocket revient à passer un appel téléphonique au serveur. .
WebSocket ne sera pas trop présenté ici, mais des documents de référence sont joints :

WebSocket**

Création d'applications Web en temps réel à l'aide de HTML5 WebSocket**

Ajax vs WebSocket**

6. chaque situation Il y a une utilité à chaque situation et il n'y a pas de bonne méthode absolue. Choisissez de manière flexible la méthode d'acquisition de données en fonction de la situation réelle.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Explication détaillée du modèle de boîte de HTML

Explication détaillée de l'utilisation du validateur bootstrap

Comment créer rapidement du code d'en-tête html dans sublime

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!