LinuxParty
Este pequeño tutorial muestra como hacer llamadas al servidor donde alojamos nuestras paginas PHP, utilizando las funciones de JQuery para hacer llamadas Ajax, de manera que no se recargue toda la pagina. El primer ejemplo,a través de un botón hacemos una llamada ajax al servidor y este devuelve un texto, el cual lo mostramos en nuestra pagina. En el segundo ejemplo, similar al primero, con la diferencia que lo que devolvemos de nuestra funcion php es una cadena JSON, y mediante las funciones de JQuery para JSON, leemos sus datos. Traer un dato del servidor mediante ajax y mostrarlo en un input y un element html
Bueno manos a la obra, en nuestro primer ejemplo, vamos a crear una interfase como la que ven
Este es el codigo HTML
<button id="btn_json_call" type="button">Cargar</button>
<button id="btn_reset2" type="reset">Limpiar</button>
<input id="txt_dato1" type="text" />
<input id="txt_dato2" type="text" />
Ahora nuestro codigo Javascript para hacerlo funcionar.
$("#btn_simple_call").click(function(){ $.get("traer_dato.php", function(result){ $("#txt_dato").val(result); $("#sp_dato").html(result); }); return false; }); $("#btn_reset").click(function(){ $("#txt_dato").val(""); $("#sp_dato").html(""); });
Este codigo lo que hace es utilizando los selectores de JQuery, referenciamos el boton $("#btn_simple_call"), y ahora escuchamos el evento click, $("#btn_simple_call").click. Lo que se muestra dentro del paracentesis de click(...) es la tarea a realizar cuando se haga click sobre el botón.
En este caso, utilizamos la funcion de JQuery, get, la cual nos permite hacer una llamada ajax utilizando el metodo HTTP GET, lo que devuelva la pagina a la que llamamos, sera a lo que hace referencia la variable result, por eso es que en el código ven $.get("traer_dato.php", function(result){...});
Ahora para este ejemplo, estamos llamando a una pagina php, llamada traer_dato.php, cuyo codigo es el siguiente:
<?php echo "Este es el dato del servidor"; ?>
Capturamos, este valor en el lado javascript, en la variable result y lo mostramos en el input y el elemento html, $("#txt_dato").val(result); $("#sp_dato").html(result); Traer datos en formato json del servidor mediante ajax y mostrarlo en un input y un element html
Haremos algo similar a lo anterior, primero nuestro html.
<button id="btn_json_call" type="button">Cargar</button>
<button id="btn_reset2" type="reset">Limpiar</button>
<input id="txt_dato1" type="text" placeholder="Dato 1 a cargar">
<input id="txt_dato2" type="text" placeholder="Dato 2 a cargar">
Y ahora el codigo Javascript
//Traer Datos Json $("#btn_json_call").click(function(){ $.get("traer_datos_json.php", function(result){ var json=$.parseJSON(result); $("#txt_dato1").val(json.dato1); $("#txt_dato2").val(json.dato2); }); return false; }); $("#btn_reset2").click(function(){ $("#txt_dato1").val(""); $("#txt_dato2").val(""); });
Como veran el codigo es bastante similar a diferencia, que ahora recibimos una cadena tipo JSON, para los que no saben JSON (Javasript Object Notation), es un formato ligero para intercambiar datos.
En este ejemplo,debemos parsear la cadena json para acceder a los datos, y lo hacemos asi $.parseJSON(cadena_json), en nuestro caso el resultado lo asignamos a una variable, var json=$.parseJSON(result).
Y ahora accedemos a los datos y los mostramos en pantalla, $("#txt_dato1").val(json.dato1);
Nuestro codigo PHP es bastante sencillo
<?php
$valores=array("dato1"=>"Primer Dato", "dato2"=>"Segundo Dato");
echo json_encode($valores);
?>
Todo el codigo lo pueden encontrar en mi repositorio github: https://github.com/dairdev/dennis-php-ejemplos
Vía blog DairDev

-
Virtualización
- ☁️ Kubernetes desde cero: Qué es, cómo se instala y ejemplos para empezar a orquestar contenedores como un profesional
- Metaverso: Estado actual y futuro
- Se lanzó el software de virtualización de código abierto QEMU 10.0. Novedades
- VirtualBox 7.1.4 agrega soporte inicial para Linux Kernel 6.12 y otros cambios de Linux
- VirtualBox 7.1 promete soporte Wayland para compartir portapapeles en Linux
- VirtualBox 7.0.20 presenta soporte inicial para los kernels openSUSE 15.6 y RHEL 9.5
- VirtualBox 7.0.16 lanzado con soporte inicial para los kernels Linux 6.8 y 6.9
- Instalar un Sistema Operativo Invitado en VirtualBox
- Publicación de QEMU 8.0 para Linux, Windows y Mac con más emulación ARM y RISC-V
- Realidad Virtual, una revolución para el modelo digital de ocio
- Cómo instalar VirtualBox 7.0 en AlmaLinux
- Cómo instalar QEMU/KVM en Ubuntu para crear máquinas virtuales