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