Wie js mit thinkphp5-Daten interagiert

In den letzten Jahren hat die rasante Entwicklung der Front-End-Technologie bessere Möglichkeiten für das Entwicklungsmodell der Front-End- und Back-End-Trennung geschaffen. Auch in der Entwicklung ist JavaScript (kurz JS) als häufig verwendete Front-End-Entwicklungssprache zu einem unverzichtbaren Bestandteil der Front-End-Entwicklung geworden. In diesem Fall ist die Art und Weise, wie JS mit dem Back-End-Framework PHP5 (kurz TP5) interagiert, zu einem der Probleme geworden, die Entwickler beschäftigen. In diesem Artikel werde ich die Dateninteraktionsmethode zwischen JS und tp5 unter verschiedenen Gesichtspunkten ausführlich vorstellen.

1. Front-End- und Back-End-Dateninteraktionsmethoden

Es gibt normalerweise zwei Arten der Front-End- und Back-End-Dateninteraktion: synchron und asynchron. Die synchrone Methode bedeutet, dass das Front-End warten muss, bis das Back-End Daten zurückgibt, bevor es antwortet. Die asynchrone Methode muss nicht warten, nachdem das Front-End die Anfrage initiiert hat Führen Sie die Ausführung nach unten aus und warten Sie, bis die Back-End-Daten zurückgegeben werden, bevor Sie sie verarbeiten.

In der tatsächlichen Entwicklung wird die Synchronisationsmethode aufgrund ihrer Mängel wie Verzögerungen immer weniger verwendet. Die asynchrone Methode ist zur Hauptmethode für die Interaktion zwischen Front-End- und Back-End-Daten geworden. In der folgenden Diskussion werden wir hauptsächlich die Methode der Interaktion zwischen JS- und TP5-Daten im asynchronen Modus erläutern.

2. Verwenden Sie Ajax, um eine asynchrone Kommunikation zu erreichen. Bei der asynchronen Kommunikation besteht der Kern darin, Ajax zu verwenden, um eine Front-End- und Back-End-Datenkommunikation zu erreichen. Ajax ist die Abkürzung für Asynchronous JavaScript and XML (asynchrones JavaScript und XML). Es handelt sich um eine asynchrone Kommunikationstechnologie, die JavaScript verwendet. Es kann Teile der Seite aktualisieren, ohne die gesamte Seite neu laden zu müssen.

Bei der Verwendung von Ajax müssen wir JS-Code im Front-End-Teil und TP5-Code im Back-End-Teil schreiben. Nachdem das Front-End eine Ajax-Anfrage gesendet hat, gibt das Back-End nach Erhalt der Anfrage JSON-Daten zurück (es können auch Daten im XML-Format sein). Nachdem die Daten zurückgegeben wurden, werden sie vom Front-End-JS verarbeitet.

Das Folgende ist ein Fall in der tatsächlichen Entwicklung. Auf dieser Grundlage wird die spezifische Implementierung der asynchronen Interaktion zwischen JS und tp5 detailliert vorgestellt.

Schritt eins: Frontend-Code im Frontend schreiben

Wir schreiben zunächst eine Seite, um Benutzerberechtigungen im Frontend festzulegen. Die Seite muss zwei Vorgänge implementieren: Berechtigungen hinzufügen und löschen. Hier nehmen wir zur Veranschaulichung die Operation „Hinzufügen“ als Beispiel.

Wir müssen zunächst eine Schaltfläche auf die Seite schreiben, sodass nach dem Klicken auf die Schaltfläche ein Formular mit den Berechtigungsinformationen angezeigt wird. Gleichzeitig müssen wir zur bequemen Anzeige der Berechtigungsinformationen auch eine Tabelle auf die Seite schreiben, in der alle Berechtigungsinformationen angezeigt werden.

Verwenden Sie den folgenden JS-Code, um eine HTML-Tabelle zum Anzeigen von Berechtigungsinformationen zu generieren.

function getAuthorityTable() {
    $.ajax({
        type: "GET",
        url: "/index/getAuthorityTable",
        dataType: "json",
        success: function (data) {
            var table = "<table><thead><tr><th>权限编号</th><th>权限名</th><th>操作</th></thead><tbody>";
            for (var i = 0; i < data.length; i++) {
                table += "<tr><td>" + data[i]["id"] + "</td><td>" + data[i]["authority_name"] + "</td><td><button onclick='deleteAuthority(" + data[i]["id"] + ")'>删除</button></td></tr>";
            }
            table += "</tbody></table>";
            $("#authorityTable").html(table);
        }
    });
}

Hier verwenden wir Ajax, um Back-End-Daten asynchron abzurufen und eine HTML-Tabelle zu generieren, die aus drei Teilen besteht: Berechtigungsnummer, Berechtigungsname und Löschvorgang. Unter anderem definiert die Methode getAuthorityTable() die Front-End-Anfrage-URL und generiert aus den Anfrageergebnissen eine HTML-Tabelle zur Anzeige auf der Seite.

Schritt 2: TP5-Code im Backend schreiben

Wir müssen auf der Serverseite eine Methode schreiben, um auf die URL-Anfrage zu antworten. In tp5 können wir Controller und Modelle zur Implementierung verwenden.

Zum Beispiel können wir eine setAuthority-Methode im Controller-Index-Controller hinzufügen:

public function setAuthority()
{
    $authority_name = input('post.authority_name');
    $model = new Authority();
    if ($model -> add_authority($authority_name)) {
        $this -> success('添加权限成功!');
    } else {
        $this -> error('添加权限失败！');
    }
}

Im obigen Code verwenden wir die Eingabemethode, um die POST-Parameter zu empfangen, und rufen die add_authority-Methode in der Authority-Modellklasse auf, um Berechtigungsinformationen hinzuzufügen. Schließlich werden die integrierten Methoden $this->success und $this->error von tp5 verwendet, um Statusinformationen zurückzugeben, um das Front-End über den Erfolg oder Misserfolg des Vorgangs zu informieren.

Schritt 3: Verwenden Sie JS, um eine Anfrage an das Front-End zu senden.

Wir müssen den JS-Code im Front-End implementieren. Nachdem Sie auf die Schaltfläche geklickt haben, senden Sie eine Anfrage an das Backend und erhalten die Antwort vom Backend zurückgegeben.

Nehmen Sie den Vorgang zum Hinzufügen von Berechtigungen als Beispiel und implementieren Sie diesen Vorgang im Schaltflächenklickereignis.

function addAuthority() {
    var authority_name = $("#authorityName").val();
    $.ajax({
        type: "POST",
        url: "/index/setAuthority",
        dataType: "json",
        data: {authority_name: authority_name},
        success: function (data) {
            alert(data.msg);
        }
    });
}

Im obigen Code verwenden wir die POST-Methode, um eine Anfrage an den Server zu senden und dabei „authority_name“ als Parameter an den SetAuthority-Controller zu senden. Als nächstes wird data.msg verwendet, um die Betriebsstatusinformationen zurückzugeben.

3. Andere Dinge, die Aufmerksamkeit erfordern

Zusätzlich zu den oben genannten Punkten gibt es einige Punkte, die Aufmerksamkeit erfordern:

1. Da Ajax-Anfragen asynchron sind und Domänennamen Front-End und Back-End sind Um die Sicherheit zu gewährleisten, befindet sich das Front-End-JS nicht unter demselben Domänennamen wie der Backend-Server. Zu diesem Zeitpunkt müssen Sie darüber nachdenken, das Problem domänenübergreifender Anforderungen zu lösen. Zu den gängigen Lösungen gehören die Verwendung von JSONP, das Hinzufügen von Headern im Backend usw.

2. CSRF-Angriff: Da asynchrone Ajax-Anfragen zu Sicherheitsproblemen bei Cross-Site-Request-Forgery (CSRF) führen können, hat tp5 eine eigene Methode verwendet, um CSRF-Angriffe zu verhindern. Sie können relevante Parameter in der Datei thinkconfig.php ändern.

3. Überprüfung der Front-End- und Back-End-Interaktion: Um die Sicherheit des Systems zu gewährleisten, ist eine Überprüfung während des Front-End- und Back-End-Dateninteraktionsprozesses erforderlich. Für verwandte Vorgänge können Sie die tp5-Validator-Klasse verwenden .

4.JSON-Datenverarbeitung: Da Daten im JSON-Format bei asynchronen Ajax-Anforderungen verarbeitet werden müssen, verwendet Front-End-JS häufig Json.stringify, JSON.parse und andere Methoden, um verwandte Vorgänge auszuführen.

Kurz gesagt, die Dateninteraktion zwischen JS und tp5 basiert auf der asynchronen Kommunikationsmethode von Ajax. Solange wir die Kommunikationsmethoden von JS und TP5 verstehen und die entsprechenden Tools und Methoden erlernen, können wir die Website-Entwicklung effizienter abschließen. Gleichzeitig müssen wir während des Entwicklungsprozesses auch einige Sicherheits- und Verifizierungsaspekte berücksichtigen. Ich hoffe, dass dieser Artikel den Lesern hilfreich sein kann.

Das obige ist der detaillierte Inhalt vonWie js mit thinkphp5-Daten interagiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!