Web-Frontend
js-Tutorial
Der Knoten implementiert eine einfache Front-End- und Back-End-Interaktion
Der Knoten implementiert eine einfache Front-End- und Back-End-Interaktion
Node ist eine Fähigkeit, die im Front-End erlernt werden muss. Wir alle wissen, dass Node js als Back-End verwendet. Bevor wir Node lernen, müssen wir verstehen, wie Node die Front-End- und Back-End-Interaktion implementiert. Dieser Artikel bietet Ihnen eine einfache Front-End- und Back-End-Interaktion von Node (Erklärung mit Beispielen). Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
Hier ist eine einfache Interaktion zwischen nativem Ajax und Node. Freunde, die gerade Node gelernt haben, können einen Blick darauf werfen. Einerseits verstehen Sie, wie Server und Client interagieren, andererseits sind Sie mit der Knotenentwicklung besser vertraut.
Veröffentlichen Sie zuerst den Code: (Bei Interesse können Sie ihn lokal kopieren und selbst ausführen)
Der HTML-Code der Hauptseite
index.html:
<!doctype> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button id="btn1">food</button> <button id="btn2">other</button> <h1 id="content"></h1> <script type="text/javascript" src="./client.js"></script> </body> </html>
Der nächste ist der serverseitige Code. Die Ausführungsmethode besteht darin, den Befehl in die Knotenumgebung einzugeben: node server.js
server.js:
let http = require('http');
let qs = require('querystring');
let server = http.createServer(function(req, res) {
let body = ''; // 一定要初始化为"" 不然是undefined
req.on('data', function(data) {
body += data; // 所接受的Json数据
});
req.on('end', function() {
res.writeHead(200, { // 响应状态
"Content-Type": "text/plain", // 响应数据类型
'Access-Control-Allow-Origin': '*' // 允许任何一个域名访问
});
if(qs.parse(body).name == 'food') {
res.write('apple');
} else {
res.write('other');
}
res.end();
});
});
server.listen(3000);Das eingeführte qs-Modul wird verwendet. Parse JSON
req.on('data', callback); // Überwachen Sie die Daten des Clients und führen Sie die Rückruffunktion aus, sobald Daten gesendet werden
req.on('end', callback ); // Datenempfang abgeschlossen
res // Auf
client js antworten (die Funktion ist für einige DOM-Operationen und das Senden von Ajax-Anfragen verantwortlich )
client.js:
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
let content = document.getElementById('content');
btn1.addEventListener('click', function() {
ajax('POST', "http://127.0.0.1:3000/", 'name='+this.innerHTML);
});
btn2.addEventListener('click', function() {
ajax('POST', "http://127.0.0.1:3000/", 'name='+this.innerHTML);
});
// 封装的ajax方法
function ajax(method, url, val) { // 方法，路径，传送数据
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
content.innerHTML = xhr.responseText;
} else {
alert('Request was unsuccessful: ' + xhr.status);
}
}
};
xhr.open(method, url, true);
if(val)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(val);
}Diese einfache Interaktion ist so. Tatsächlich ist das erste, was wir tun, wenn wir zum ersten Mal eine Back-End-Sprache lernen, eine Front-End-Sprache zu schreiben. Interaktives End- und Back-End-Programm. Dies wird uns helfen, die Arbeitsteilung zwischen Front- und Back-End besser zu verstehen.
Ausführungsmethode:
Führen Sie zuerst server.js aus und öffnen Sie dann HTML, um eine Antwort anzufordern.
Verwandte Empfehlungen:
Zusammenfassung verwandter Inhalte zur Front-End- und Back-End-Interaktion
Node.js+Koa-Framework realisiert Front -End- und Back-End-Interaktion
PHP-Front-End- und Back-End-Interaktion
Das obige ist der detaillierte Inhalt vonDer Knoten implementiert eine einfache Front-End- und Back-End-Interaktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
Ein Artikel über Speichersteuerung in Node
Apr 26, 2023 pm 05:37 PM
Der nicht blockierende und ereignisgesteuerte Knotendienst hat den Vorteil eines geringen Speicherverbrauchs und eignet sich sehr gut für die Verarbeitung massiver Netzwerkanforderungen. Unter der Voraussetzung massiver Anfragen müssen Probleme im Zusammenhang mit der „Speicherkontrolle“ berücksichtigt werden. 1. Der Garbage-Collection-Mechanismus und die Speicherbeschränkungen von V8 Js wird von der Garbage-Collection-Maschine gesteuert
Detaillierte grafische Erläuterung des Speichers und des GC der Node V8-Engine
Mar 29, 2023 pm 06:02 PM
Dieser Artikel vermittelt Ihnen ein detailliertes Verständnis des Speichers und Garbage Collectors (GC) der NodeJS V8-Engine. Ich hoffe, er wird Ihnen hilfreich sein!
So verwenden Sie Express für den Datei-Upload im Knotenprojekt
Mar 28, 2023 pm 07:28 PM
Wie gehe ich mit dem Datei-Upload um? Der folgende Artikel stellt Ihnen vor, wie Sie Express zum Hochladen von Dateien im Knotenprojekt verwenden. Ich hoffe, er ist hilfreich für Sie!
Aktivieren Sie die Split-Screen-Interaktion in Win11
Dec 25, 2023 pm 03:05 PM
Im Win11-System können wir durch Aktivieren der Split-Screen-Interaktion mehreren Monitoren ermöglichen, dasselbe System zu verwenden und zusammenzuarbeiten. Viele Freunde wissen jedoch nicht, wie man die Split-Screen-Interaktion einschaltet Die Systemeinstellungen sind: Steh auf und lerne. So öffnen Sie die Split-Screen-Interaktion in Win11 1. Klicken Sie auf das Startmenü und suchen Sie nach „Einstellungen“. 2. Suchen Sie dort dann nach den „System“-Einstellungen. 3. Wählen Sie nach Eingabe der Systemeinstellungen links „Anzeige“ aus. 4. Wählen Sie dann in den Mehrfachanzeigen rechts „Diese Anzeigen erweitern“.
Eine ausführliche Analyse des Prozessmanagement-Tools „pm2' von Node
Apr 03, 2023 pm 06:02 PM
In diesem Artikel stellen wir Ihnen das Prozessmanagement-Tool „pm2“ von Node vor und sprechen darüber, warum PM2 benötigt wird und wie Sie PM2 installieren und verwenden. Ich hoffe, dass es für alle hilfreich ist!
12 Punkte, die Sie beim Teilen von Interface-Design-Dokumenten beachten sollten
Apr 24, 2023 am 10:58 AM
Als ich kürzlich das Schnittstellendokument überprüfte, stellte ich fest, dass der von einem kleinen Partner definierte Parameter ein Aufzählungswert war, das Schnittstellendokument jedoch nicht den entsprechenden spezifischen Aufzählungswert angab. Tatsächlich ist es wirklich wichtig, wie man Schnittstellendokumente gut schreibt. Heute präsentiert Ihnen Bruder Tianluo 12 Punkte, auf die Sie in Dokumenten zum Interface-Design achten sollten ~
Vertieftes Verständnis von Generika in Golang (Generika)
Apr 11, 2023 pm 07:20 PM
Was Ihnen dieser Artikel vermittelt, ist ein tiefgreifendes Verständnis der Generika in Golang? Wie verwende ich Generika? Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
PI -Knotenunterricht: Was ist ein PI -Knoten? Wie installiere und richte ich einen PI -Knoten ein?
Mar 05, 2025 pm 05:57 PM
Detaillierte Erläuterungs- und Installationshandbuch für Pinetwork -Knoten In diesem Artikel wird das Pinetwork -Ökosystem im Detail vorgestellt - PI -Knoten, eine Schlüsselrolle im Pinetwork -Ökosystem und vollständige Schritte für die Installation und Konfiguration. Nach dem Start des Pinetwork -Blockchain -Testnetzes sind PI -Knoten zu einem wichtigen Bestandteil vieler Pioniere geworden, die aktiv an den Tests teilnehmen und sich auf die bevorstehende Hauptnetzwerkveröffentlichung vorbereiten. Wenn Sie Pinetwork noch nicht kennen, wenden Sie sich bitte an was Picoin ist? Was ist der Preis für die Auflistung? PI -Nutzung, Bergbau und Sicherheitsanalyse. Was ist Pinetwork? Das Pinetwork -Projekt begann 2019 und besitzt seine exklusive Kryptowährung PI -Münze. Das Projekt zielt darauf ab, eine zu erstellen, an der jeder teilnehmen kann
