Cómo se pueden enviar datos a páginas PHP, a través de POST, que accedemos por Ajax utilizando el framework 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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...