Maison > Article > interface Web > ajax envoie une requête nodejs

ajax envoie une requête nodejs

PHPzoriginal: 2023-05-08 10:05:37548parcourir

Remarque : Cet article explique comment utiliser ajax pour envoyer des requêtes nodejs du point de vue du front-end. Si vous n'êtes pas familier avec nodejs, vous pouvez d'abord en apprendre davantage.

Avec le développement continu du développement Web, l'interaction des données entre le front-end et le back-end est devenue l'une des fonctions importantes de nombreux sites Web ou applications. En tant qu'élément important de la technologie frontale, Ajax peut réaliser des requêtes asynchrones et des interactions de données sans actualiser la page. En tant que choix populaire pour la technologie back-end, Node.js fournit également des API pratiques pour gérer les requêtes et les réponses HTTP.

Alors, comment utiliser Ajax pour envoyer des requêtes Node.js ? Ce qui suit sera introduit à partir des aspects suivants.

Installez et démarrez le service Node.js

Tout d'abord, vous devez installer Node.js et créer un service Node.js. Le processus d'installation de Node.js ne sera pas présenté ici, en supposant qu'il soit terminé.

Ensuite, entrez le dossier où se trouve le projet sur la ligne de commande et exécutez la commande suivante :

$ npm init -y
$ npm install express --save

La commande ci-dessus initialisera un projet Node.js et installera le Cadre express. Ensuite, créez un fichier nommé app.js et ajoutez-y le code suivant :

const express = require('express');
const app = express();

app.get('/api', (req, res) => {
  res.json({"message":"Hello World!"});
});

app.listen(3000, () => {
  console.log('Listening on port 3000');
});

Le code ci-dessus crée une route nommée /api, qui renverra une route contenant "Hello World! "Objet JSON de information. Le service Node.js écoutera le port 3000 après son démarrage.

Exécutez la commande suivante pour démarrer le service Node.js :

$ node app.js

Visitez http://localhost:3000/api dans le navigateur, vous devriez voir le contenu suivant : #🎜 🎜#

{"message":"Hello World!"}

Cela montre que le service Node.js a été configuré avec succès et peut gérer les requêtes HTTP.

Ensuite, utilisez Ajax pour envoyer des requêtes au service Node.js dans la page front-end. En prenant jQuery comme exemple ici, vous devez d'abord introduire la bibliothèque jQuery dans le fichier html. Vous pouvez utiliser CDN pour le présenter, ou vous pouvez télécharger directement le fichier jQuery localement.

Ajoutez le code suivant dans le fichier html :

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
  <meta charset="utf-8">
  <title>Ajax Demo</title>
</head>
<body>
  <button id="btn">发送请求</button>
  <script>
    $(document).ready(function(){
      $('#btn').click(function(){
        $.ajax({
          url: '/api',
          type: 'GET',
          dataType: 'json',
          success: function(data){
            console.log(data);
          },
          error: function(xhr, status, error){
            console.log(error);
          }
        });
      });
    });
  </script>
</body>
</html>

Le code ci-dessus crée un bouton Lorsque vous cliquez sur le bouton, il utilisera la fonction $.ajax() de jQuery pour. envoyer une requête GET à la route /api du service Node.js. Une fois la demande réussie, la console affichera l'objet JSON renvoyé par le serveur.

Vous pouvez sélectionner l'élément DOM correspondant via le sélecteur et lier la fonction de traitement d'événements pour réaliser l'interaction des données entre la page et le backend. C'est l'une des façons les plus importantes d'utiliser Ajax.

Enfin, la requête doit être traitée dans le service Node.js. Ajoutez le code suivant à app.js :

app.use(express.static('public'));

app.get('/', (req, res) => {
  res.sendFile(__dirname+'/public/index.html');
});

Le code ci-dessus ajoute un service de fichiers statiques au service Node.js et définit la page d'accueil sur le fichier index.html dans le dossier public.

Maintenant, vous pouvez ouvrir http://localhost:3000 dans le navigateur, cliquer sur le bouton "Envoyer la demande", la console affichera l'objet JSON renvoyé par le serveur et la page affichera également " Bonjour tout le monde !

Summary

Cet article explique comment utiliser Ajax pour envoyer des requêtes Node.js et fournit une brève introduction à la manière dont le front-end et le back-end interagissent. De cette manière, le front-end peut interagir relativement facilement avec les données du back-end, obtenant ainsi des fonctions plus riches et une meilleure expérience utilisateur. Bien entendu, la capacité de Node.js à gérer les requêtes HTTP est bien plus que cela, et des fonctions plus complexes et plus complètes nécessitent une étude et une pratique approfondies.

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!

node.js json jquery ajax html express public JS 对象事件 dom 异步选择器 http

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment résoudre la concurrence dans nodejsArticle suivant：Comment résoudre la concurrence dans nodejs

Articles Liés

Voir plus