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.
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
Producción:
Publicación traducida automáticamente
Artículo escrito por namankumar2592 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA