LinuxParty
NUESTRO SITIO necesita la publicidad para costear hosting y el dominio. Por favor considera deshabilitar tu AdBlock en nuestro sitio. También puedes hacernos una donación entrando en linuxparty.es, en la columna de la derecha.
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

-
Programación
- Tutorial de programación de Introducción a Python en Linux - Parte 1
- Hoja Resumen de Las expresiones regulares (perl / sed, etc.)
- Interprete Basic programado en C (código fuente)
- Editores visuales WYSIWYG html para Linux
- Pequeño Intérprete GWBASIC, programado en C.
- Cómo utilizar el sistema de control de versiones de Git en Linux [Guía completa]
- Crear un Plugin de Contenido para Joomla.
- Mini Tutorial para aprender Scripts de bash
- Los 20 mejores Visores y Editores Hexadecimales de Linux
- Los 27 mejores IDEs para programación C/C++ o editores de código de Linux
- Aprende Python con este curso gratuito en el que crearás videojuegos clásicos como Tetris y Pong
- Manual para aprender el 80% de JavaScript en el 20% de tiempo
- Python finalmente supera a Java en GitHub
- InForm ha llegado a la versión 1.0 concluyendo su fase Beta.
- Visual Studio Online, la versión Web del IDE, ya disponible.