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

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>

Copier après la connexion

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>

Copier après la connexion

Utilisez JS pour obtenir

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

Copier après la connexion

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>

Copier après la connexion

Tâche JS

Remplissez les données dans la déclaration de variable JavaScript de <script>. </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> <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> </pre><div class="contentsignin">Copier après la connexion</div></div> </div> <p>Ou utilisez le moteur de modèles backend Smarty : </p> <p><script><br /> var user_avatar = "{$user_avatar}";<br /> </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, JS signalera une erreur

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

Copier après la connexion

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'
}

Copier après la connexion

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

Derniers articles par auteur