Zusammenfassung der Front-End- und Back-End-Dateninteraktionsmethoden

Dieser Artikel eignet sich für Anfänger mit wenig Erfahrung in der kollaborativen Front-End- und Back-End-Entwicklung.

HTML-Zuweisung

Ausgabe an den Wert oder Datennamen des Elements

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

Nach dem Login kopieren

Rendering-Ergebnis

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

Nach dem Login kopieren

Verwenden Sie JS, um

zu erhalten

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

Nach dem Login kopieren

Vorteile:

Belegt keine globalen Variablen und kann von JS frei bezogen werden.

Verwendungsvorschläge:

Geeignet für die Übergabe einfacher Daten und auch sehr gut für die Bindung von Beziehungen zwischen mehreren einfachen Daten und Elementen.

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

Nach dem Login kopieren

JS-Zuweisung

Füllen Sie Daten in die JavaScript-Variablendeklaration von <script> ein. </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">Nach dem Login kopieren</div></div> </div> <p>Oder verwenden Sie die Smarty-Backend-Template-Engine: </p> <p><script><br /> var user_avatar = "{$user_avatar}";<br /> </script>

Vorteile:
Die Weitergabe von Daten ist sehr praktisch. Das Frontend ruft direkt die Variable user_avatar auf, um die Daten zu verwenden.

Nachteile:

Um String-Daten zu übertragen, wird die globale Variable user_avatar belegt. Wenn viele Daten übertragen werden müssen, werden viele globale Variablen belegt.
Wenn die zurückgegebenen Daten Zeilenumbrüche enthalten, wird JS einen Fehler melden

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

Nach dem Login kopieren

Optimierung:

Sie können den gesamten vom Backend zurückgegebenen Inhalt über eine bestimmte Variable speichern, auf die verwiesen wird, wodurch die Verwendung globaler Variablen minimiert wird. Beispiel:

// PHP 代码
var SERVER_DATA = {
  username: {$username},
  userid: {$userid},
  title: {$title}
}
// 渲染结果
var SERVER_DATA = {
  username: "NimoChu",
  userid: 1,
  title: 'F2E'
}

Nach dem Login kopieren

Verwendungsvorschläge:

Verwenden Sie diese Methode, wenn Sie Daten so schnell wie möglich an JS übertragen müssen und sehr sicher sind, dass die Daten stabil sind. Wenn das Datenformat komplex ist, wird empfohlen, ein Skript zum Füllen von JSON oder AJAX zum Abrufen von JSON zu verwenden.

Skript füllt JSON
Was ist JSON?

Füllen Sie JSON-Daten in das

Neueste Artikel des Autors