La notación de objetos de JavaScript (JSON) es un formato de transferencia de datos que se utiliza para enviar datos hacia o desde el servidor. Se utiliza comúnmente en la integración de API debido a sus beneficios y simplicidad. En este ejemplo, utilizaremos XML HttpRequest para enviar datos al servidor.
Frontend: Usaremos un formulario simple que contiene el nombre y el correo electrónico como un botón de entrada y envío para enviarlo al servidor. Los datos que se envían a un servidor web deben ser una string. Como resultado, usamos la función JSON.stringify() para transformar los datos en una string y transmitirlos al servidor a través de una solicitud XHR .
HTML
<!DOCTYPE html>
<html>
<body>
<h1>GeeksForGeeks</h1>
<input type="text" id="name"
placeholder="Your name" />
<input type="email" id="email"
placeholder="Email" />
<button onclick="sendJSONdata()">
Submit
</button>
<script>
function sendJSONdata() {
var name = document.getElementById("name");
var email = document.getElementById("email");
// Creating a XHR object
var xhr = new XMLHttpRequest();
// open a connection
xhr.open("POST", "/userdata");
// Setting the request header
xhr.setRequestHeader(
"Content-Type", "application/json"
);
// Converting JSON data to string
var data = JSON.stringify(
{ name: name.value, email: email.value }
);
xhr.send(data);
name.value = "";
email.value = "";
}
</script>
</body>
</html>
Backend: usaremos el marco Express y NodeJS para crear el servidor que se ejecuta en el puerto 3000. La solicitud de publicación por parte del front-end en la ruta /userdata se maneja aquí y uno puede ver los datos enviados por el frontend al iniciar sesión con la ayuda del método console.log().
Javascript
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.json());
app.get("/", function (req, res) {
res.sendFile(__dirname + "/index.html");
});
app.post("/userdata", function (req, res) {
console.log(req.body);
});
app.listen(3000, function () {
console.log("Server started on port 3000");
});
Producción:
Publicación traducida automáticamente
Artículo escrito por vishalkumar98765432 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA