Para enviar y recibir datos hacia o desde el servidor se utiliza el formato JSON . JSON son las siglas de Javascript Object Notation y es un formato muy utilizado en la actualidad por sus ventajas y sencillez. En este artículo, usaremos XML HttpRequest para recibir datos del servidor y usaremos NodeJS como backend para enviar datos JSON.
Ejemplo: El siguiente ejemplo demostrará este enfoque.
Porción de interfaz: el código HTML consta de un formulario que tiene dos entradas (nombre y correo electrónico), un botón de envío para enviar datos al servidor y una etiqueta de párrafo vacía para mostrar la respuesta del servidor. Se debe utilizar una string para enviar datos a un servidor web. Como consecuencia, cambiamos los datos a una string y los enviamos al servidor a través de una solicitud XHR usando la función JSON.stringify() .
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green">Welcome to GFG</h1>
<input type="text" id="name"
placeholder="Your name" />
<input type="email" id="email"
placeholder="Email" />
<button onclick="sendJSONdata()">Send</button>
<p id="result" style="color: blue"></p>
<script>
function sendJSONdata() {
var name =
document.getElementById("name").value;
var email =
document.getElementById("email").value;
var result =
document.getElementById("result");
// Creating a XHR object
var xhr = new XMLHttpRequest();
// open a connection
xhr.open("POST", "/userdata");
// Set the request header
xhr.setRequestHeader(
"Content-Type", "application/json"
);
// Converting JSON data to string
var data = JSON.stringify(
{ name: name, email: email }
);
xhr.send(data);
// Create a state change callback
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 &&
xhr.status === 200) {
// Print received data from server
result.innerHTML = this.responseText;
}
};
}
</script>
</body>
</html>
Porción de back-end: hemos utilizado el marco expreso de NodeJS para crear el servidor que se ejecuta en 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("/userdata", function (req, res) {
res.send(
`Hello ${req.body.name}, your email is ${req.body.email}`
);
});
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