Node implémente une interaction simple front-end et back-end
Node est une compétence incontournable pour le front-end. Nous savons tous que node utilise js comme back-end. Avant d'apprendre node, nous devons comprendre comment node réalise les interactions front-end et back-end. Cet article vous propose une interaction simple front-end et back-end de Node (explication avec exemples). L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.
Voici une interaction simple entre ajax natif et node. Les amis qui viennent d'apprendre node peuvent y jeter un œil. D'une part, vous comprenez comment le serveur et le client interagissent et, d'autre part, vous êtes plus familier avec le développement de nœuds.
Publiez d'abord le code : (Si vous êtes intéressé, vous pouvez le copier localement et l'exécuter vous-même)
Le html de la page principale
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>
Vient ensuite le code côté serveur. La méthode d'exécution consiste à saisir la commande dans l'environnement du nœud : node server.js
server.js : le module qs introduit. par
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);est utilisé Parse JSON
req.on('data', callback); // Surveille les données du client et exécute la fonction de rappel une fois les données envoyées
req.on('end', callback ); // Réception des données terminée
res // Répondre au
client js (la fonction est responsable de certaines opérations DOM et de l'envoi des requêtes ajax )
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);
}Cette simple interaction est comme ceci. En fait, la première chose que nous faisons lorsque nous apprenons pour la première fois un langage back-end est d'écrire un front-end. programme interactif final et back-end. Cela nous aidera à mieux comprendre la division du travail entre le front-end et le back-end.
Méthode d'exécution :
Exécutez d'abord server.js, puis ouvrez le code HTML pour demander une réponse.
Recommandations associées :
Résumé du contenu associé sur l'interaction front-end et back-end
Le framework Node.js+Koa réalise le front-end -Interaction PHP front-end et back-end
Interaction PHP front-end et back-end
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Un article pour parler du contrôle de la mémoire dans Node
Apr 26, 2023 pm 05:37 PM
Le service Node construit sur une base non bloquante et piloté par les événements présente l'avantage d'une faible consommation de mémoire et est très adapté à la gestion de requêtes réseau massives. Dans le contexte de demandes massives, les questions liées au « contrôle de la mémoire » doivent être prises en compte. 1. Le mécanisme de récupération de place du V8 et les limitations de mémoire Js sont contrôlés par la machine de récupération de place
Explication graphique détaillée de la mémoire et du GC du moteur Node V8
Mar 29, 2023 pm 06:02 PM
Cet article vous donnera une compréhension approfondie de la mémoire et du garbage collector (GC) du moteur NodeJS V8. J'espère qu'il vous sera utile !
Comment utiliser Express pour gérer le téléchargement de fichiers dans un projet de nœud
Mar 28, 2023 pm 07:28 PM
Comment gérer le téléchargement de fichiers ? L'article suivant vous expliquera comment utiliser Express pour gérer les téléchargements de fichiers dans le projet de nœud. J'espère qu'il vous sera utile !
Activer le mode d'interaction en écran partagé dans Win11
Dec 25, 2023 pm 03:05 PM
Dans le système Win11, nous pouvons permettre à plusieurs moniteurs d'utiliser le même système et de fonctionner ensemble en activant l'interaction sur écran partagé. Cependant, de nombreux amis ne savent pas comment activer l'interaction sur écran partagé. les paramètres du système. Ce qui suit est Levez-vous et étudiez. Comment ouvrir l'interaction en écran partagé dans Win11 1. Cliquez sur le menu Démarrer et recherchez "Paramètres" 2. Recherchez ensuite les paramètres "Système". 3. Après avoir saisi les paramètres système, sélectionnez « Affichage » à gauche. 4. Sélectionnez ensuite « Étendre ces affichages » dans les multiples affichages à droite.
Une analyse approfondie de l'outil de gestion de processus de Node « pm2 »
Apr 03, 2023 pm 06:02 PM
Cet article partagera avec vous l'outil de gestion de processus de Node "pm2" et expliquera pourquoi pm2 est nécessaire, comment installer et utiliser pm2, j'espère qu'il sera utile à tout le monde !
12 points à noter lors du partage de documents de conception d'interface
Apr 24, 2023 am 10:58 AM
Lorsque j'ai récemment examiné le document d'interface, j'ai découvert que le paramètre défini par un petit partenaire était une valeur d'énumération, mais le document d'interface ne donnait pas la valeur d'énumération spécifique correspondante. En fait, il est très important de bien rédiger les documents d’interface. Aujourd'hui, frère Tianluo vous propose 12 points auxquels prêter attention dans les documents de conception d'interface~
Compréhension approfondie des génériques en golang (Générique)
Apr 11, 2023 pm 07:20 PM
Ce que cet article vous apporte, c'est une compréhension approfondie des génériques en golang ? Comment utiliser les génériques ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
Enseignement du nœud PI: Qu'est-ce qu'un nœud PI? Comment installer et configurer le nœud PI?
Mar 05, 2025 pm 05:57 PM
Explication détaillée et guide d'installation pour les nœuds de pignon Cet article introduira l'écosystème de pignon en détail - nœuds PI, un rôle clé dans l'écosystème de pignon et fournir des étapes complètes pour l'installation et la configuration. Après le lancement du réseau de test de la blockchain pèse, les nœuds PI sont devenus une partie importante de nombreux pionniers participant activement aux tests, se préparant à la prochaine version du réseau principal. Si vous ne connaissez pas encore Pinetwork, veuillez vous référer à ce qu'est Picoin? Quel est le prix de l'inscription? PI Utilisation, exploitation minière et sécurité. Qu'est-ce que Pinetwork? Le projet Pinetwork a commencé en 2019 et possède sa pièce exclusive de crypto-monnaie PI. Le projet vise à en créer un que tout le monde peut participer
