¿Cómo enviar solicitudes AJAX con JQuery a PHP?

Este es un pequeño ejemplo acerca de cómo realizar solicitudes Ajax desde el cliente (navegador web) a una aplicación en PHP utilizando JQuery.


Publicado: Editado: Estado:

Hola a todos,

En esta ocasión quiero compartir un pequeño ejemplo acerca de cómo realizar solicitudes Ajax desde el cliente (navegador web) a una aplicación en PHP.

Debo aclarar que supondré que si estás viendo esto ya sabes sobre HTML y PHP, por lo que, aunque ajunto todos los códigos, me centraré más que nada en cómo realizar la solicitud, preparar los datos para el envío y cómo capturar la respuesta. La forma en que procesemos la información en el servidor, dependerá de qué es lo que realmente deseamos hacer con los datos enviados.

Haré el ejemplo de dos formas:

  1. Un botón (también se puede usar un enlace <a>)  desde el cual el usuario puede iniciar la solicitud.
  2. Y con un formulario (lo más común), desde el cual detendremos la acción por defecto y evitaremos que se cargue la página que procesa los datos.

Archivos necesarios:

Para este ejemplo creamos 3 archivos, inicialmente no tienen información y también necesitaremos el framework JQuery:

  1. interfaz_usuario.html: contendrá las etiquetas HTML que usaremos para crear la interfaz.
  2. ajax.js: contendrá el código en Javascript con los métodos y configuraciones necesarias para realizar las solicitudes Ajax.
  3. procesar_solicitudes.php: Código PHP que se ejecutará del lado del servidor y no enviará la respuesta según la información que le pasemos.

Interfaz (interfaz_usuario.html):

Como podrás ver la interfaz que usaremos es algo sencilla, contiene dos escenarios; uno sin formulario y otro con formulario. La primera parte son sólo elementos <input> de tipo texto y un <input> de tipo botón. En la segunda parte es un formulario también con dos entradas de datos, pero en esta ocasión un <input> de tipo “submit”, que es el que envía el formulario para su procesamiento al servidor. Al final hay un <div> con ID = “Mensaje” que es donde mostraré las respuestas del servidor.

 

Código de la interfaz:

<!DOCTYPE html>
<html>
<head>
 <title>Prueba de solicitud AJAX</title>
 <meta charset="utf-8">
 <script src="jquery-1.11.1.min.js"></script>
 <script src="ajax.js"></script>
</head>
<body style="background-color: #007070; color: #FFF; font-family: Verdana; margin-left: 30px;">
 <h2>Pruebas de solicitudes Ajax</h2>
 <hr>

 <h3>Prueba con botón y/o enlace</h3>
 <div>
  <label>Usuario: </label><input type="text" name="Usuario"></input>
  <label>Correo: </label><input type="text" name="Correo"></input>
  <input type="button" name="btnRegistrarme" value="Registrarme"></input>
 </div>
 <hr>

 <h3>Prueba con captura de formulario</h3>
 <div>
  <form id="ActualizarPerfil" method="POST" action="http://localhost:8080/politecnia_ejemplo_ajax/procesar_solicitudes.php">
   <label>Edad: </label><input type="number" name="Edad"></input>
   <label>Pais: </label><input type="text" name="Pais"></input>
   <input type="submit" value="Actualizar"></input>
  </form>
 </div>
 <hr>

 <h2>Respuesta del servidor</h2>
 <div id="Mensaje" style="color: yellow;">
 </div>
</body>
</html>

Servidor (procesar_solicitudes.php):

En este archivo también he escrito dos segmentos. Una que procesará la primera parte de la interfaz (Usuario y Correo) y otra que procesará la segunda parte donde usaremos un formulario estándar (Edad y Pais).

<?php

 if (isset($_POST['Usuario']) && isset($_POST['Correo'])) {
  $Usuario = $_POST['Usuario'];
  $Correo = $_POST['Correo'];

  echo '<p>Bienvenido ' . $Usuario . '. Se ha enviado un mensaje de confirmación a: ' . $Correo . '</p>';
 }

 if (isset($_POST['Edad']) && isset($_POST['Pais'])) {
  echo '<p>Se ha actualizado tu perfil con la siguiente información:</p>
     <ul>
      <li>Edad: ' . $_POST['Edad'] . '</li>
      <li>Pais: ' . $_POST['Pais'] . '</li>
     </ul>';
 }

?>

Es importante tener en cuenta que todo “echo” que se haga en el PHP será enviado como respuesta a la solicitud Ajax. Por ejemplo, si escribo:

echo 'SirOne';
echo '2002';

PHP enviará como respuesta ‘SirOne2002’.

Solicitud Ajax (ajax.js):

Primeramente le indicamos al navegador que el código que se va a escribir se ejecute únicamente cunado la página haya cargado por completo:

$(document).ready(function() {

});

Dentro de este método o función, crearemos dos secciones. Uno para las definiciones de las manipulaciones de eventos que haremos y otro donde estarán las funciones que ejecutarán todo el código en sí.

Parte 1:

Lo primero que hacemos es capturar el evento click sobre el botón, cuando esto suceda, invocamos a la función Registrarme. Lo hacemos con:

$('[name=btnRegistrarme]').click(Registrarme);

Si el botón tuviera un ID, la selección con JQuery en lugar de usar el atributo name, sería:

$('#ID_del_boton').click(Registrarme);

Ahora procedemos a crear la función Registrarme donde configuraremos la solicitud Ajax que tiene la siguiente estructura:

function Registrarme() {
        $.ajax({
            type: "",
            url: '',
            data: { },
            dataType: "",
            timeout: ,
            beforeSend: function() {
                //código…
            },
            success: function(RespHTML) {
                //código…
            },
            error: function() {
                //código…
            }
        });

En este ejemplo sólo explicaré la configuración que he realizado, si deseas aprender más sobre todas las opciones de configuraciones que puedes utilizar diríjete a jQuery.ajax().

En type: ponemos el método que usaremos para enviar los parámetros o datos al servidor. Puede ser POST o GET. En mi caso la mayoría del tiempo utilizo el método POST.

En url: escribimos la dirección hacia donde enviaremos la solicitud, en este ejemplo debemos poner la url de la ubicación de nuestro archivo procesar_solicitudes.php. Como tengo el ejemplo en un servidor local, y en un subdirectorio llamado politecnia_ejemplo_ajax, mi url sería:

'http://localhost:8080/politecnia_ejemplo_ajax/procesar_solicitudes.php'

En data: escribimos los datos que deseamos enviar al servidor. Lo haremos en esta primer parte como un arreglo de tipo Clave: Valor. En la segunda parte "serializaremos" un formulario completo para no escribir campo por campo en el data:.

data: {
     Usuario: $('[name=Usuario]').val(),
     Correo: $('[name=Correo]').val()
},

En este ejemplo, tengo dos <input>, uno con el atributo name de "Usuario" y el otro como "Correo". Extraigo el valor de los <input> con jQuery mediante $('selector_html_o_css').val()

En dataType: escribimos el tipo de datos que esperamos como respuesta del servidor. Puede ser xml, json, script o html. En mi caso espero una respuesta en formato HTML.

En timeout: escribimos un valor entero que representa los milisegundos que la solicitud debe esperar antes de intentar ser enviada si el navegador está procesando otras solicitudes y no tiene más conexiones disponibles.

En beforeSend: function { ... } no es más que el código javascript que queremos que se ejecute antes de enviar la solicitud. Útil cuando queremos comprobar que los datos del usuario son válidos, que ha informado todos los campos requeridos, mostrar un mensaje (comúnmente un .gif girando que indica que se está procesando la solicitud), entre otros. En este ejemplo tan solo muestro un mensaje de alerta:

alert('En breve se enviará la solicitud.');

En success: function(RespHTML) { … } escribimos el código que se ejecutará cuando recibamos la respuesta desde el servidor, la respuesta del servidor la recibo en el parámetro que he nombrado como RespHTML. Yo solamente mostraré el mensaje en un <div> con ID "Mensaje":

$('#Mensaje').html(RespHTML);

Y finalmente en error: function() { ... } escribimos el código que se ejecutará si la solicitud no tiene éxito. En este ejemplo mostraré una alerta más.

alert('Lo sentimos, se ha producido un error.');

Un error común es que se nos pase alguna coma “ , ” o llave “ { “ o paréntesis “ ( “, así que debemos tener cuidados y más aún cuando todo es parte de una sola instrucción como las de este tipo.

Si hemos agregado la información correspondiente en cada parte de la estructura, debemos tener algo como esto el archivo ajax.js:

$(document).ready(function() {
/* Declaraciones para las manipulaciones de eventos
 -------------------------------------------------*/
 
 $('[name=btnRegistrarme]').click(Registrarme);


 /* Definición de las funciones
 -------------------------------------------------*/
 
 function Registrarme() {
        $.ajax({
            type: "POST",
            url: 'http://localhost:8080/politecnia_ejemplo_ajax/procesar_solicitudes.php',
            data: {
                Usuario: $('[name=Usuario]').val(),
                Correo: $('[name=Correo]').val()
            },
            dataType: "html",
            timeout: 1000,
            beforeSend: function() {
                alert('En breve se enviará la solicitud.');
            },
            success: function(RespHTML) {
                $('#Mensaje').html(RespHTML);
            },
            error: function() {
                alert('Lo sentimos, se ha producido un error.');
            }
        });
    }
});

 

Con esto ya podemos probar esta primera parte y verificar que todo funcione correctamente.

 

Al hacer clic en Registrarme lo primero que veremos será el mensaje que hemos configurado en beforeSend. Pulsamos en Aceptar y veremos cómo se realiza la solicitud y el servidor responde sin necesidad de que se recargue la página:

 

 

Parte 2:

Ahora veremos un ejemplo haciendo uso de un formulario y lo “interceptaremos” para que su evento por defecto (enviar el formulario al servidor) no se ejecute y lo hagamos a través de Ajax.

Agregamos en ajax.js una nueva manipulación de eventos donde especificamos que cuando el navegador se está preparando para enviar el formulario con ID "ActualizarPerfil", inmediatamente llame a nuestra función Actualizar_Perfil(). Esto lo logramos con el evento submit():

$('#ActualizarPerfil').submit(Actualizar_Perfil);

Procedemos a crear la función Actualizar_Perfil usando la misma estructura que la anterior, pero hacemos algunos cambios en la estructura y algunos datos.

function Actualizar_Perfil(event) {
        event.preventDefault();
        $.ajax({
                type: "POST",
                url: 'http://localhost:8080/politecnia_ejemplo_ajax/procesar_solicitudes.php',
                dataType: "html",
                data: $('#ActualizarPerfil').serialize(),
                success: function(RespHTML) {
                    $('#Mensaje').append(RespHTML);
                },
                error: function() {
                    alert('Lo sentimos, se ha producido un error.');
                }
            });
    }

Primer cambio: agregamos event como parámetro de la función.

Segundo cambio: evitamos que el evento predeterminado (enviar) se lleve a cabo:

event.preventDefault();

El evento predeterminado de un formulario es enviarse, así como el evento predeterminado de un enlace <a> es cargar una url que se especifique en el atributo href.

Tercer cambio:

Imagínate un formulario con una cantidad de datos considerable que sería un poco tedioso estar agregándolos en el data: de $.ajax()… Sería algo complejo, más si tenemos varios formulario que procesar.

Por eso, cuando usamos formularios podemos seleccionarlo con JQuery y “serializarlo” o lo que es lo mismo, crear una cadena de texto con todos los nombres de campos y sus valores contenidos en el formulario, puedes encontrar más información aquí. En mi caso, selecciono mediante el ID e invoco a la función serialize():

data: $('#ActualizarPerfil').serialize(),

Cuarto cambio: En lugar de sobre escribir el mensaje anterior con la respuesta del servidor, lo anexo al final con .append() de JQuery.

$('#Mensaje').append(RespHTML);

Hasta este punto, el resultado sería el siguiente: Al escribir los datos solicitados y pulsar en Actualizar veremos cómo la respuesta del servidor se agrega al mensaje anterior.

 

Utilizar Ajax para el envío y recepción de datos entre el cliente y el servidor ayuda a mejorar nuestras aplicaciones en cuanto a rendimiento al evitar recargar las páginas cada vez que necesitamos procesar la información proporcionada por los usuarios. Además que crea una experiencia de navegación mucho más ágil, sencilla y atractiva.

Probablemente sientas que la explicación es muy extensa, pero quise explicar el proceso paso a paso y detalle a detalle. Espero sus comentarios, quejas o sugerencias.

Saludos,

 

Bibliografía

JQuery "write less, do more": http://api.jquery.com/jquery.ajax/

Ejemplo de mi autoría: Descargar archivos de ejemplo. Contraseña: www.politecnia.net

Dar puntos de agradecimiento
Reportar esta publicación

Déjanos tu comentario

Comentarios (2)

Muy artículo, hace algunos años escribí este otro:

http://debsconsultores.blogspot.com/2014/05/abc-con-jquery-ajax-php.html

Veo que es un ejemplo más amplio que también incluye la interacción con la base de datos. En mi caso solamente quise explicar un poco sobre lo necesario para enviar las solicitudes y recibir la respuesta.

Gracias por ampliar la publicación y nuestra "base de conocimientos" con el enlace al artículo.

SirOne

(Administrador)

Intereses

Café (elixir de dioses), música, programación, diseño, "El lado oscuro de la luna", The Big Bang Theory, iZombie.

Puntos: 174 Votos: 126