Uso basico de JQuery con PHP : Llamadas AJAX simple y Json

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_simple_call" type="button">Cargar</button>
<button id="btn_reset" type="reset">Limpiar</button>
<input id="txt_dato" type="text" placeholder="Dato a cargar">
<span id="sp_dato">Dato a Cargar</span>

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 parentecis de click(...) es la tarea a realizar cuando se haga click sobre el boton.

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 codigo 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

Les dejo aca abajo el ejemplo funcionando.