Wie Front-End- und Back-End-Daten wissenschaftlich interagieren sollten

Dieses Mal zeige ich Ihnen, wie die Front-End- und Back-End-Daten wissenschaftlich miteinander interagieren sollten. Was sind die Vorsichtsmaßnahmen für die Interaktion zwischen Front-End- und Back-End-Daten? Werfen wir einen Blick darauf.

HTML-Zuweisung

JS-Zuweisung

Skript füllt JSON

AJAX erhält JSON

WebSocket überträgt Daten in Echtzeit

Zusammenfassung

1. HTML-Zuweisungsausgabe zum Wert oder Datennamen des Elements

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

Rendering-Ergebnis

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

Verwenden Sie JS, um $(' input'). val();

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

Vorteile: Es belegt keine globalen Variablen und kann von JS frei bezogen werden.
Verwendungsvorschläge: Geeignet für die Übergabe einfacher Daten und auch sehr gut geeignet für die Bindung von Beziehungen zwischen mehreren einfachen Daten und Elementen.

 <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. JS-Zuweisung
füllt Daten in die JavaScript-Variablendeklaration von 3f1c4e4b6b16bbbd69b2ee476dc4f83a.

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

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

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

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

Um String-Daten zu übertragen, ist 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, führt dies zu einem JS-Fehler
// Das Rendering-Ergebnis weist Zeilenumbrüche auf. var user_id = "https://avatars1.githubusercontent.com/u/3949015?v =3&s=40" ;// Uncaught SyntaxError: Unexpected token ILLEGAL

Optimierung: Der gesamte vom Backend zurückgegebene Inhalt kann in einer Point-Variable gespeichert werden, wodurch die Verwendung globaler Variablen minimiert wird. Beispiel: // PHP-Code var SERVER_DATA = { Benutzername: {$username}, Benutzer-ID: {$userid}, Titel: {$title}} // Rendering-Ergebnis var SERVER_DATA = { Benutzername: „NimoChu“, Benutzer-ID: 1, Titel : '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.

3. Skript füllt JSON**** JSON-Syntax** füllt JSON-Daten in das 3f1c4e4b6b16bbbd69b2ee476dc4f83a und das Frontend ruft die JSON-Zeichenfolge über das DOM ab und analysiert sie in ein Objekt.

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

Vorteile: 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 verwendet werden müssen. Beispiel: Das Front-End steuert das Rendern der Seite, und das Back-End füllt die JSON-Datenquelle in 3f1c4e4b6b16bbbd69b2ee476dc4f83a und das Front-End verwendet eine JavaScript-Vorlagen-Engine zum Rendern der Seite. Wie wähle ich eine Javascript-Vorlagen-Engine aus?

4. AJAX ruft JSON ab. Verwenden Sie AJAX, um JSON-Daten abzurufen.

<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); 
  })
})

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

Auf der Seite werden nur Informationen angezeigt

Der Benutzer klickt, um Informationen anzuzeigen

Zeigt Benutzerinformationen an und lädt Bilder

Sendet eine AJAX-Anfrage an den Server, um Benutzerinformationen zu erhalten

Der Server gibt eine JSON-Zeichenfolge zurück. $.getJSON konvertiert die zurückgegebene JSON-Zeichenfolge automatisch in ein Objekt

Füllen Sie den Inhalt in 4730362a714be16deabe5f3a72be307a

Vorteile: Es belegt keine globalen Variablen und DOM-Knoten, und Sie können 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.

5. Wenn AJAX-Anfragen und -Antworten mit dem Senden von Textnachrichten an den Server und dem Warten auf die Antwort des Servers verglichen werden, ist WebSocket wie ein Telefonanruf an den Server .

Ich werde WebSocket hier nicht allzu sehr vorstellen, aber hier sind die Referenzmaterialien:

WebSocket**

Erstellen von Echtzeit-Webanwendungen mit HTML5 WebSocket**

Ajax vs WebSocket**

6 . Fassen Sie jede Situation zusammen. Es gibt für jede Situation einen Nutzen und es gibt keinen absolut richtigen Weg. Wählen Sie die Datenerfassungsmethode flexibel entsprechend der tatsächlichen Situation.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Detaillierte Erläuterung des Box-Modells von HTML

Detaillierte Erläuterung der Verwendung von Bootstrap-Validator

So erstellen Sie schnell HTML-Header-Code in Sublime

Das obige ist der detaillierte Inhalt vonWie Front-End- und Back-End-Daten wissenschaftlich interagieren sollten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!