En este artículo, aprenderemos a agregar elementos a una array existente con solo hacer clic en un botón usando PHP.
PHP es un lenguaje del lado del servidor y solo responde a requests (GET, POST, PUT, PATCH y DELETE). La acción de hacer clic en el botón ocurre como parte del lado del cliente para llamar directamente a una función de PHP.
Necesitamos un lenguaje intermediario para realizar esta acción. En este caso, usaremos JavaScript. Cuando un usuario haga clic en el botón, el botón llamará a la función de JavaScript. Luego, la función enviará una solicitud POST a nuestro script PHP en el servidor para agregar datos a la array.
Cada vez que se haga clic en el botón, se enviará una nueva solicitud al script PHP y, por lo tanto, se reiniciará nuestra array. Para superar esto, almacenaremos nuestra array en un archivo JSON en el servidor y luego, para cada solicitud, le agregaremos datos. Trataremos con tres archivos «index.html» que contienen entrada de texto y botón, «data.php» que maneja la solicitud, lee del archivo JSON y le agrega datos y «array.json» para almacenar la array.
Ejemplo:
index.html
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<!--We are taking array elements from user-->
<input type="text" value="name" id="name" />
<!--It will call our JS function-->
<button type="button" id="add">Add</button>
<script>
$(document).ready(function () {
var he = $("#name").value;
$("#add").click(function () {
$.post(
"data.php", {
data: document.getElementById("name").value,
},
function (data, status) {
alert("Data: " + data + "\nStatus: " + status);
}
);
});
});
</script>
</body>
</html>
El siguiente es el código PHP para «data.php» utilizado en el archivo HTML anterior. Estamos utilizando el método post() de jQuery para realizar una solicitud.
data.php
<?php
if(isset($_POST['data'])) {
$data= $_POST['data'];
$inp = file_get_contents('array.json');
$tempArray = json_decode($inp);
if($tempArray) {
array_push($tempArray, $data);
$jsonData = json_encode($tempArray);
}
else {
$jsonData=json_encode(array($data));
}
file_put_contents('array.json', $jsonData);
$inp = file_get_contents('array.json');
$tempArray = json_decode($inp);
print_r($tempArray);
}
?>
Estamos manejando la solicitud junto con los datos enviados a » data.php «. Cada vez que se envía una solicitud, abre el archivo JSON y lee la array anterior. Si no hay una array anterior, es decir, el archivo » array.json » está vacío, entonces crea una array. Luego le agrega datos.
Producción:
Pasos de ejecución: Primero confirmaremos que nuestro archivo “results.json” está vacío.
archivo vacío
Ejecutaremos «http://localhost/index.html» en el navegador.
pantalla de ingreso de usuario
Escriba algo en la entrada que desee agregar a la array y haga clic en el botón Agregar. Notará que aparece un cuadro de diálogo que confirma que se agregaron los datos e incluso muestra la array.
Primera entrada
Repita esto unas cuantas veces.
Check “results.json” file.