Zusammenfassung der Front-End- und Back-End-Dateninteraktionsmethoden_Grundkenntnisse

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>

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>

Verwenden Sie JS, um

zu erhalten

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

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>

JS-Zuweisung

Füllen Sie Daten in die JavaScript-Variablendeklaration von <script> ein. </script>

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

Oder verwenden Sie die Smarty-Backend-Template-Engine:

<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?v=3&s=40";
// Uncaught SyntaxError: Unexpected token ILLEGAL

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

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 <script>-Tag, und das Frontend ruft die JSON-Zeichenfolge über das DOM ab und analysiert sie in ein Objekt. </script>

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

Vorteile:

Die Daten können nach dem Laden der Seite abgerufen werden. Es belegt keine globalen Variablen und kann große Mengen an Datensammlungen übergeben.

Nachteile:

Wenn die Datenmenge besonders groß ist, ist das anfängliche Laden der Seite langsam. Die Verlangsamung wird nicht nur durch die Dateigröße verursacht, sondern auch dadurch, dass der Server Zeit braucht, um die Daten abzufragen und die Sammlung zurückzugeben. Sie können AJAX verwenden, um JSON abzurufen, um das Laden bei Bedarf abzuschließen und zu warten.

Verwendungsvorschläge:

Geeignet für die Übergabe großer Datensammlungen, die beim Laden des DOM benötigt werden. Beispiel: Das Front-End steuert das Rendern der Seite, das Back-End füllt die JSON-Datenquelle in <script> und das Front-End verwendet eine JavaScript-Vorlagen-Engine zum Rendern der Seite. </script>

AJAX JSON abrufen

Verwenden Sie AJAX, um JSON-Daten abzurufen

<span id="showdata">查看资料</span>
<div style="display:none;" id="box">
  <h2 id="用户信息">用户信息</h2>
  <p id="info"><img  src="/static/imghwm/default1.png"  data-src="loading.gif"  class="lazy" / alt="Zusammenfassung der Front-End- und Back-End-Dateninteraktionsmethoden_Grundkenntnisse" ></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);
  })
})

Dies ist ein Beispiel für den Erhalt von Benutzerinformationen über AJAX. Der Vorgang ist wie folgt:

Auf der Seite werden nur Anzeigeinformationen angezeigt
Der Benutzer klickt, um Informationen anzuzeigen
Benutzerinformationen anzeigen und Bild laden
Senden Sie eine AJAX-Anfrage an den Server, um Benutzerinformationen zu erhalten
Der Server gibt einen JSON-String zurück und $.getJSON konvertiert den zurückgegebenen JSON-String automatisch in ein Objekt
Füllen Sie den Inhalt mit

aus

Vorteile:

Belegt keine globalen Variablen und DOM-Knoten und kann die Auslösebedingungen für den Datenabruf frei steuern (wenn die Seite geladen wird, wenn der Benutzer klickt, um Informationen anzuzeigen, oder wenn der Benutzer auf eine Schaltfläche klickt). Wenn Sie mit dem Abrufen von Daten beginnen, können Sie den Platzhalter für das Ladebild verwenden, um den Benutzer darauf hinzuweisen, dass die Daten gelesen werden. Verhindert ein langsames Laden der Seite, das durch das Laden aller Daten auf der Seite verursacht wird.

Nachteile:

Es werden zusätzliche HTTP-Anfragen generiert. Es kann nicht sofort nach dem Laden des DOM abgerufen werden. Es muss eine Anfrage gesendet und eine Antwort empfangen werden.

Verwendungsvorschläge:

Geeignet zum Laden von Nicht-Hauptinformationen, zum Festlegen von Auslösebedingungen (wenn der Benutzer klickt, um Informationen anzuzeigen) und zum Bereitstellen benutzerfreundlicher Eingabeaufforderungen zum Lesen von Daten.

WebSocket überträgt Daten in Echtzeit
Wenn AJAX-Anfragen und -Antworten mit dem Senden von Textnachrichten an den Server und dem Warten auf die Antwort des Servers auf die Textnachrichten verglichen werden, ist WebSocket so, als würde man den Server anrufen.

Ich werde hier nicht viel über WebSocket vorstellen. Referenzmaterialien sind beigefügt:

Wiki:WebSocket
Erstellen Sie Echtzeit-Webanwendungen mit HTML5 WebSocket
Ajax vs. WebSocket

Zusammenfassung
Es gibt für jede Situation einen Platz und es gibt keinen absolut richtigen Weg, dies zu tun. Wählen Sie die Datenerfassungsmethode flexibel entsprechend der tatsächlichen Situation.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.