El propósito de este artículo es pasar múltiples objetos JSON como datos usando el método jQuery $ajax() en un documento HTML.
Enfoque: Cree un botón en un documento HTML para enviar objetos JSON a un servidor PHP. En el archivo JavaScript, agregue un detector de eventos de clic al botón. Al hacer clic en el botón, se realiza una solicitud al archivo PHP utilizando el método jQuery $ajax() mediante el cual se pasan múltiples objetos JSON al servidor.
Código HTML: El siguiente código demuestra el diseño o la estructura de la interfaz de usuario. Al hacer clic en el botón HTML, da la respuesta del servidor PHP en el div HTML resultID .
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- CSS file --> <link rel="stylesheet" href="style.css"> <!-- jQuery Ajax CDN --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script> <!-- JavaScript file --> <script src="script.js"></script> </head> <body> <center> <h2 style="color:green">GeeksforGeeks</h2> <div class="container"> <b>Pass multiple JSON objects</b> <br/><br/> <!-- Button to multiple JSON objects --> <button type="button" id="btn"> Click on me! </button> <div style="height:10px"></div> <div id="resultID"></div> </div> </center> </body> </html>
Código CSS: El siguiente código es el contenido del archivo «style.css» utilizado en el código HTML anterior.
Style,css
.container {
border: 1px solid rgb(73, 72, 72);
border-radius: 10px;
margin: auto;
padding: 10px;
text-align: center;
}
button {
border-radius: 5px;
padding: 10px;
color: #fff;
background-color: #167deb;
border-color: #0062cc;
font-weight: bolder;
cursor: pointer;
}
button:hover {
text-decoration: none;
background-color: #0069d9;
border-color: #0062cc;
}
Código JavaScript: El siguiente código es el contenido del archivo «script.js» utilizado en el código HTML anterior. Maneja el evento click() para el botón usando el método jQuery ajax() y pasando los datos a un archivo de servidor PHP, es decir, action.php
script.js
$(document).ready(() => {
// Adding 'click' event listener to button
$("#btn").click(() => {
// Two JSON objects are passed to server
let obj1 = {"name": "John Doe"};
let obj2 = {"name": "Duke"};
// jQuery Ajax Post Request using $.ajax()
$.ajax({
url: 'action.php',
type: 'POST',
// passing JSON objects as comma(,) separated values
data: {
obj1,
obj2
},
success: (response) => {
// response from PHP back-end PHP server
$("#resultID").show().html(response);
}
})
});
});
Nota: Puede pasar tantos objetos JSON utilizando valores separados por comas (,), es decir, obj1, obj2, obj3,…
Código PHP: El siguiente es el código para el archivo “action.php” utilizado en el código JavaScript anterior.
PHP
<?php
// Check if JSON Objects are set by user
if (isset($_POST['obj1']) && $_POST['obj2'])
{
// Get JSON objects in variables
$obj1 = $_POST['obj1'];
$obj2 = $_POST['obj2'];
// Sending response to script file
echo "Success";
}
?>
Producción :
múltiples datos que pasan y obtienen respuesta
Publicación traducida automáticamente
Artículo escrito por asmitsirohi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA