El propósito de este artículo es enviar pares clave-valor dinámicos al back-end de PHP utilizando jQuery AJAX en un documento HTML.
Cree dos campos de entrada, es decir, uno para una clave y el segundo para un valor, y un botón (para enviar un par clave-valor) en un documento HTML. Asigne una identificación única tanto a los campos como al botón. En el archivo JavaScript, agregue un detector de eventos al botón, es decir, haga clic. Al hacer clic en el botón, se realiza una solicitud al archivo PHP utilizando jQuery Ajax.
Código HTML: El siguiente código es para la estructura.
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> <div class="container"> <h1>Dynamic Key Value Pair</h1> <!-- Input Field for key --> <input type="text" name="key" id="key" placeholder="Enter Key"> <br> <!-- Input Field for value --> <input type="text" name="value" id="value" placeholder="Enter Value"> <br> <!-- Button to send key value pair --> <button type="button" id="btn"> Send Data </button> </div> </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;
}
h1 {
margin-top: 10px;
}
input[type="text"] {
padding: 10px;
border-radius: 5px;
margin: 10px;
font-family: "Times New Roman", Times, serif;
font-size: larger;
}
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.
main.js
$(document).ready(() => {
// Adding 'click' event listener to button
$("#btn").click(() => {
// Fetching key's input field data
const key = $("#key").val();
// Fetching values input field data
const value = $("#value").val();
// Initializing array of objects to
// store key-value pairs
let data = {};
// assigning key-value pair to data object
data[key] = value;
// jQuery Ajax Post Request
$.post(
"action.php",
{
data,
},
(response) => {
// response from PHP back-end
alert(`Response from sever side is: ${response}`);
}
);
});
});
Código PHP: El siguiente es el código para el archivo “action.php” utilizado en el código HTML anterior.
action.php
<?php
// Checking, if post value is
// set by user or not
if (isset($_POST['data'])) {
// getting key-value pair object
// in $data variable
$data = $_POST['data'];
// Sending Response
echo "Success";
}
?>
Salida :
par de valores clave dinámicos
Publicación traducida automáticamente
Artículo escrito por asmitsirohi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA