Notación de objetos de JavaScript (JSON). Es un formato ligero de transferencia de datos . Es muy fácil de entender tanto por humanos como por máquinas. Se usa comúnmente para enviar datos desde o hacia el servidor. Hoy en día es muy utilizado en la integración de APIs por sus ventajas y sencillez .
En este ejemplo, vamos a utilizar AJAX (JavaScript asíncrono y XML) para enviar datos en segundo plano. Estamos usando PHP para el backend.
Interfaz:
- HTML:
En la interfaz, vamos a crear un formulario que toma el nombre y el correo electrónico como entrada y lo convierte en un objeto JSON usando javascript y lo envía al servidor.
Después de hacer clic en el botón Enviar, se llama a sendJSON() que se define a continuación.
html
<!DOCTYPE html> <html> <head> <title> JavaScript | Sending JSON data to server. </title> </head> <body style="text-align:center;" id="body"> <h1 style="color:green;"> GeeksForGeeks </h1> <p> <!-- Making a text input --> <input type="text" id="name" placeholder="Your name"> <input type="email" id="email" placeholder="Email"> <!-- Button to send data --> <button onclick="sendJSON()">Send JSON</button> <!-- For printing result from server --> <p class="result" style="color:green"></p> </p> <!-- Include the JavaScript file --> <script src="index.js"></script> </body> </html>
- JavaScript:
al enviar datos a un servidor web, los datos deben ser una string . Entonces, estamos usando la función JSON.stringify() para convertir datos en strings y enviarlos a través de una solicitud XHR al servidor. A continuación se muestra el código de ejemplo.
javascript
function sendJSON(){
let result = document.querySelector('.result');
let name = document.querySelector('#name');
let email = document.querySelector('#email');
// Creating a XHR object
let xhr = new XMLHttpRequest();
let url = "submit.php";
// open a connection
xhr.open("POST", url, true);
// Set the request header i.e. which type of content you are sending
xhr.setRequestHeader("Content-Type", "application/json");
// Create a state change callback
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// Print received data from server
result.innerHTML = this.responseText;
}
};
// Converting JSON data to string
var data = JSON.stringify({ "name": name.value, "email": email.value });
// Sending data with the request
xhr.send(data);
}
- back-end:
Estamos usando PHP como lenguaje de scripting. Cree un archivo llamado submit.php , en este archivo, decodificaremos los datos recibidos a JSON y devolveremos una oración formada con los datos recibidos.
php
<?php
header("Content-Type: application/json");
$data = json_decode(file_get_contents("php://input"));
echo "Hello $data->name, your email is $data->email";
?>
Ahora, cuando complete los detalles y presione el botón Enviar JSON , verá algo como:
Publicación traducida automáticamente
Artículo escrito por frikishaan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA