Cómo enviar datos por POST a páginas Ajax con jQuery4PHP

  • Por
  • PHP
Cómo se pueden enviar datos a páginas PHP, a través de POST, que accedemos por Ajax utilizando el framework jQuery4PHP.
El framework Javascript jQuery tiene muchas formas de trabajar con Ajax y estamos revisando, a través de ejemplos, algunas de las más sencillas. Todo ello lo estamos explicando en el Manual de jQuery para PHP y en concreto en el artículo anterior comenzamos a explicar el modo de trabajo utilizando la tecnología Ajax, que tenemos que implementar para usar jQuery desde PHP con las librerías jQuery4PHP.

Seguramente, durante nuestro trabajo con Ajax, en algún momento necesitemos enviar datos a las páginas que estamos accediendo. El envío de datos no tiene mucho misterio y simplemente se debe indicar como un parámetro adicional en la llamada al método load(), utilizado para cargar un contenido por Ajax. Eso es así en jQuery y también en las librerías jQuery4PHP.

En este artículo veremos un ejemplos sencillo de trabajo con Ajax y envío de datos por POST. Tendremos dos botones que invocan por Ajax a la misma página. En uno de ellos enviaremos un dato por POST y en otro enviaremos un valor distinto. De ese modo demostraremos lo sencillo que es realizar un script en PHP que accede a una página por Ajax y que muestra datos diferentes según lo que se le envíe.

El ejemplo se puede ver en marcha para hacerse una idea exacta de lo que vamos a realizar.

Podemos comenzar echando un vistazo a los botones que pondrán en marcha las solicitudes Ajax y la capa donde mostraremos los resultados de las mismas.

<button id="miboton2">Carga con Ajax pasando el dato "nombre=pepe"!!</button>
<button id="miboton3">Carga con Ajax pasando el dato "nombre=Julián López"!!</button>
<div id="micapa2"></div>

A continuación podemos ver cómo se envían esos valores a una página a través de los siguientes scripts jQuery4PHP.

<?php
echo
YsJQuery::newInstance()
   ->onClick()
   ->in("#miboton2")
   ->execute(
      YsJQuery::load(
         "contenido-ajax2.php",
         array(
            "nombre" => urlencode("pepe")
         )
      )
         ->in("#micapa2")
   );

echo
YsJQuery::newInstance()
   ->onClick()
   ->in("#miboton3")
   ->execute(
      YsJQuery::load(
         "contenido-ajax2.php",
         array(
            "nombre" => "Julián López"
         )
      )
         ->in("#micapa2")
   );
?>

Como se habrá podio ver, se realizan dos eventos para cada uno de los dos botones vistos anteriormente. El script es casi idéntico al que vimos en el ejemplo anterior sobre Ajax en jQuery4PHP, con la diferencia que ahora estamos enviando datos por POST.

Los datos que se envían se deben indicar como parámetro en la llamada al método load() y como se está viendo, se indican en un array asociativo. Hay que fijarse que en cada uno de los dos eventos producidos se indica el mismo índice ("nombre") en el array asociativo, pero se envían dos valores distintos.

La página que se solicita por Ajax es la misma en los dos botones y se llama contenido-ajax2.php. Su código lo podemos ver a continuación.

<?php
echo utf8_encode("Ya está!! El dato que recibo en la variable nombre es: ") . $_POST["nombre"];
?>

Como estamos viendo, se hace un tratamiento para asegurarnos que el texto que se escribe desde PHP utilice el juego de caracteres UTF-8. Pero el dato que nos llega por el $_POST no se convierte a UTF-8 porque realmente ya nos había llegado con ese formato.

Para acabar, colocamos el código completo de la página que hace la solicitud por Ajax.

<?php
include_once('../lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php');
YsJQueryAutoloader::register();
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Probando jQuery 4 PHP</title>
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <style type="text/css" media="all">
   #micapa{
      font-size: 14px;
      font-family: verdana;
   }
   </style>
</head>
<body>
<h1>Probando el ajax de jQuery4PHP</h1>
   
   <button id="miboton2">Carga con Ajax pasando el dato "nombre=pepe"!!</button>
   <button id="miboton3">Carga con Ajax pasando el dato "nombre=Julián López"!!</button>
   <div id="micapa2"></div>
   
   <?php
   echo
   YsJQuery::newInstance()
      ->onClick()
      ->in("#miboton2")
      ->execute(
         YsJQuery::load(
            "contenido-ajax2.php",
            array(
               "nombre" => urlencode("pepe")
            )
         )
            ->in("#micapa2")
      );
   
   echo
   YsJQuery::newInstance()
      ->onClick()
      ->in("#miboton3")
      ->execute(
         YsJQuery::load(
            "contenido-ajax2.php",
            array(
               "nombre" => "Julián López"
            )
         )
            ->in("#micapa2")
      );
   ?>
</body>
</html>

Si se desea, puede ser una buena idea ver el ejemplo en marcha.

En el artículo siguiente vamos a realizar un paso adicional que nos servirá para mostrar un mensaje de carga en el momento que la solicitud Ajax se realiza.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

RochXS

01/12/2010
Duda
Hola, checando el ejemplo veo que existe un pequeño retrazo desde que clicamos el botón y se muestra el ontenido en la página no estoy familiarizado con el uso de Ajax entonces queía saber si ¿este retrazo puede ser mayor si tratamos con contenidos más complejos?, por que considerando lo simple del ejemplo creo que este retrazo es muy grande y la verdad es que practicamente no sé mucho de javascript y parece muy interesante esta libreria para quienes usamos php como principal tecnología de desarrollo; sería una lástima que sufra de este tipo de incovenientes de desempeño.

Un saludo desde Mérida, Yucatán.

midesweb

14/2/2011
sobre el retraso...
Toda solicitud a un servidor web tiene un retraso, que depende de muchos factores como tu conexión a Internet, la velocidad y carga del servidor, lo lejana que esté la red a la que estás acciendo, etc.

La solicitud ajax también tiene un retardo, porque es una solicitud a un servidor web. Por eso las aplicaciones Ajax tienen esas imágenes de "cargando" que suelen mostrarse para que el usuario sepa que tiene que esperar y tenga paciencia...

Una solicitud más compleja, aunque le envíes datos un poco mayores, no va a tardar mucho más que esta que tiene datos simples, pues la mayoría de las esperas se deben a la comunicación entre cliente-servidor, más que a la transferencia de los propios datos que se envían entre ellos.

En el próximo artículo se habla sobre cómo crear este script con un mensaje de carga, lo que mejora bastante la experiencia de usuario.
http://www.desarrolloweb.com/articulos/mensaje-carga-ajax-jquery4php.html

villgom

02/5/2011
Duda
muy buen aporte es lo que estaba buscando. solo que tengo un pequeño problema, bueno mi caso es el siguiente: soy novato en JQUERY. estoy haciendo una consulta a una base de datos extrayendo el nombre de productos y por igual a extraigo el id, el caso es que el usuario selecciona un producto del resultado que origino la consulta y esta se abre en una ventana modal el cual se muestra el nombre del producto y su descripción, el problema es que no se cómo pasar el identificador el id de dicho producto seleccionado para que con ayuda de este realice mi consulta solo al producto que el usuario selecciono y asi poder mostrar su descripción..