JSON es una abreviatura de Javascript Object Notation . JSON es un formato de datos basado en texto que se utiliza para almacenar y transmitir información. Es ampliamente utilizado para transferir datos del servidor al cliente, del cliente al servidor y del servidor al servidor.
Sintaxis: los pares clave/valor en JSON están separados por comas:
{
"name": "David",
"age": 22,
"gender": "male",
}
Configuración e instalación:
Paso 1: Cree una carpeta llamada PostJSON y ejecute el siguiente comando para iniciar una aplicación NodeJS .
npm init -y
Paso 2: con el siguiente comando, instale los paquetes npm necesarios.
npm install express body-parser
Paso 3: cree archivos index.html y server.js en el directorio de su proyecto.
Estructura del proyecto: nuestro directorio de proyectos ahora debería verse así:
Paso 4: requiere y configura la aplicación Express para que pueda comenzar a escuchar requests. Nuestro servidor está configurado para usar el puerto 3000 .
Javascript
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(express.json());
app.get("/", function (req, res) {
res.sendFile(__dirname + "/index.html");
});
app.post("/data", function (req, res) {
console.log(req.body.name);
console.log(req.body.email);
});
app.listen(3000, function () {
console.log("Server started on port 3000");
});
La estructura del Frontend de nuestra aplicación es simple, con dos entradas: una para el nombre y otra para el correo electrónico. Un botón de envío para enviar los datos de entrada al servidor. Cuando el usuario presiona el botón Enviar, realiza una solicitud POST con datos JSON a la ruta /datos en el servidor, y luego el servidor registra los datos recibidos.
Ejemplo 1: En este ejemplo, utilizaremos la API de búsqueda para enviar datos al servidor NodeJS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Post JSON to Server</title>
<script>
function send() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var result = document.getElementById("result");
const json = {
name: name,
email: email,
};
fetch("/data", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(json),
});
}
</script>
</head>
<body>
<h1 style="color: green">Welcome To GFG</h1>
<input type="text" id="name" placeholder="Name" />
<input type="email" id="email" placeholder="Email" />
<button onclick="send()">Send</button>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra cómo podemos usar XMLHttpRequest (XHR) para realizar una solicitud JSON POST.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Post JSON to Server</title>
<script>
function send() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var result = document.getElementById("result");
const xhr = new XMLHttpRequest();
// create a JSON object
const json = {
name: name,
email: email,
};
// open request
xhr.open("POST", "/data");
// set `Content-Type` header
xhr.setRequestHeader("Content-Type",
"application/json");
// send rquest with JSON payload
xhr.send(JSON.stringify(json));
}
</script>
</head>
<body>
<h1 style="color: green">Welcome To GFG</h1>
<input type="text" id="name" placeholder="Name" />
<input type="email" id="email" placeholder="Email" />
<button onclick="send()">Send</button>
</body>
</html>
Producción:
Pasos para ejecutar la aplicación:
Paso 1: Inicie el servidor con la ayuda del siguiente comando.
node server.js
Paso 2: escriba la siguiente URL en su navegador y verá la página index.html que muestra los contenidos.
http://localhost:3000/
Paso 3: Escriba el nombre y el correo electrónico en los cuadros de entrada y haga clic en el botón Enviar.
Paso 4: compruebe en el terminal si el servidor registra los datos recibidos o no.
Publicación traducida automáticamente
Artículo escrito por vishalkumar98765432 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA