¿Cómo enviar datos desde el lado del cliente al servidor Node.js usando Ajax sin recargar la página?

En este artículo, estamos aprendiendo cómo podemos enviar datos a un servidor de Node utilizando Ajax sin recargar la página desde el lado del cliente.

Enfoque: estamos creando un botón en un documento HTML en el lado del cliente cuando se presiona el botón, se realiza una solicitud en nuestro servidor de Node y el objeto se recibe en nuestro servidor sin recargar la página. Esto se puede hacer mediante una solicitud de Ajax, estamos enviando datos a nuestro servidor de Node y también devuelve datos en respuesta a nuestra solicitud de Ajax. 

Paso 1: inicialice los módulos de Node y cree el archivo package.json con el siguiente comando.

npm init

Paso 2: Instale el módulo express localmente en su sistema usando el siguiente comando.

npm i express 

Paso 3: Cree el archivo script.js, index.html en la carpeta js como se muestra a continuación.

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura de archivos 

Paso 4: escriba el siguiente código en los archivos dados.

index.html

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <style>
        .container {
            width: 500px;
            margin: auto;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <h1>
            Sending data to a node server using 
            Ajax Request without Reloading Page
        </h1>
          
        <button id="submit">submit</button>
    </div>
  
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity=
        "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
        crossorigin="anonymous">
    </script>
    <script src="js/script.js"></script>
</body>
  
</html>

script.js

$(document).ready(function () {
   $("#submit").click(function () {
      $.post("/request",
         {
            name: "viSion",
            designation: "Professional gamer"
         },
         function (data, status) {
            console.log(data);
         });
   });
});

app.js

const express = require("express")
const path = require("path");
  
const app = express();
const port = process.env.PORT || 3000;
  
// Setting path for public directory 
const static_path = path.join(__dirname, "public");
app.use(express.static(static_path));
app.use(express.urlencoded({ extended: true }));
  
// Handling request 
app.post("/request", (req, res) => {
   res.json([{
      name_recieved: req.body.name,
      designation_recieved: req.body.designation
   }])
})
  
// Server Setup
app.listen(port, () => {
   console.log(`server is running at ${port}`);
});

Paso 5: Ejecute el archivo app.js con el siguiente comando:

node app.js

Servidor de Node de inicio 

Producción:

salida del navegador 

Publicación traducida automáticamente

Artículo escrito por namankumar2592 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *