Résumé des méthodes d'interaction de données front-end et back-end_Connaissances de base

Cet article s'adresse aux novices ayant peu d'expérience en développement collaboratif front-end et back-end.

Devoir HTML

Sortie vers la valeur ou le nom de données de l'élément

<input type="hidden" value="<&#63;php echo $user_avatar;&#63;>" />
<div data-value="<&#63;php echo $user_avatar;&#63;>"></div>

Résultat du rendu

<input type="hidden" value="https://avatars1.githubusercontent.com/u/3949015&#63;v=3&s=40" />
<div data-avatar="https://avatars1.githubusercontent.com/u/3949015&#63;v=3&s=40"></div>

Utilisez JS pour obtenir

$('input').val();
// http://jquery.bootcss.com/jQuery.data/
$('div').data('avatar');

Avantages :

N'occupe pas de variables globales et peut être obtenu librement par JS.

Suggestions d'utilisation :

Convient pour transmettre des données simples, et également très approprié pour lier des relations entre plusieurs données simples et Element.

<ul>
<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>
$('span').on('click',function(){
  $.post('/ajax/remove/',$(this).data('userid'),function(data){
    // ...
  })
})
</script>

Tâche JS

Remplissez les données dans la déclaration de variable JavaScript de 3f1c4e4b6b16bbbd69b2ee476dc4f83a.

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

Ou utilisez le moteur de modèles backend Smarty :

3f1c4e4b6b16bbbd69b2ee476dc4f83a
var user_avatar = "{$user_avatar}";
2cacc6d41bbb37262a98f745aa00fbf0

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, JS signalera une erreur

// 渲染结果有换行符
var user_id = "https://avatars1.githubusercontent.com/u/3949015?v=3&s=40";
// Uncaught SyntaxError: Unexpected token ILLEGAL

Optimisation :

Vous pouvez stocker tout le contenu renvoyé par le backend via une certaine variable pointée, minimisant ainsi l'utilisation de variables globales. Exemple :

// PHP 代码
var SERVER_DATA = {
  username: {$username},
  userid: {$userid},
  title: {$title}
}
// 渲染结果
var SERVER_DATA = {
  username: "NimoChu",
  userid: 1,
  title: '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.

le script remplit JSON
Qu’est-ce que JSON ?

Remplissez les données JSON dans la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a, et le frontal obtient la chaîne JSON via le DOM et l'analyse en un objet.

<script type="text/template" id="data">{"username":"nimojs","userid":1}</script>
<script>
var data = JSON.parse($('#data').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 nécessaires 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.

AJAX Obtenez JSON

Utilisez AJAX pour obtenir des données JSON

<span id="showdata">查看资料</span>
<div style="display:none;" id="box">
  <h2>用户信息</h2>
  <p id="info"><img src="loading.gif" /></p>
</div>
$('#showdata').on('click',function(){
  $('#box').show();
  $.getJSON('/ajax/userdata/',function(oData){
    // oData = {"username":"nimojs","userid":1}
    $('#info').html('用户名：' + oData.username + '<br>用户ID：' + 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
Afficher les informations utilisateur et charger l'image
Envoyez une requête AJAX au serveur pour obtenir des informations sur l'utilisateur
Le serveur renvoie une chaîne JSON et $.getJSON convertit automatiquement la chaîne JSON renvoyée en objet
Remplissez le contenu dans 081157ee46b27f016eb1f52f4ee681ce

Avantages :

N'occupe pas de variables globales ni de nœuds DOM, et peut 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.

WebSocket transmet les données en temps réel
Si les requêtes et 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.

Je ne présenterai pas grand-chose sur WebSocket ici. Les documents de référence sont joints :

Wiki :WebSocket
Créez des applications Web en temps réel à l'aide de HTML5 WebSocket
Ajax contre WebSocket

Résumé
Il y a une place pour chaque situation et il n’existe pas de manière absolue de procéder. Choisissez de manière flexible la méthode d'acquisition de données en fonction de la situation réelle.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.