Usando AJAX: Un simple ejemplo con PHP y jQuery.

Descrito de una manera muy resumida, AJAX es una tecnología que nos permite realizar acciones en una página web que necesiten respuesta del servidor sin recargarla. Con ello conseguimos que nuestra web sea dinámica y por tanto obtener un diseño más atractivo. Algunos ejemplos de lo que podemos hacer:
  • Un enlace que compruebe si un valor existe ya en una base de datos.
  • Completar un campo de texto de búsqueda con valores sugeridos por nuestra web.
  • Un chat web
  • etc.

En este artículo vamos a describir como realizar una sencilla llamada AJAX a una fichero externo que ejecutará un proceso (una suma entre dos valores enviados mediante POST) y nos devolverá la salida correspondiente apoyándonos con la librería jQuery, que aunque no es necesario su uso, lo haremos sobre ella para aprovechar la potencia que nos proporciona. Se podría decir que es el típico Hola mundo en AJAX.

El código se compone de dos archivos: un archivo donde mostraremos los formularios con datos de entrada y otro con el archivo de procesamiento.

A continuación mostramos el código del fichero de entrada de datos (habrá que tener cuidado con escribir correctamente la ruta a la librería jQuery):

<html>

<head>

<title>Ejemplo sencillo de AJAX</title>

<script type="text/javascript" src="/js/jquery.js"></script>

<script>
function realizaProceso(valorCaja1, valorCaja2){
        var parametros = {
                "valorCaja1" : valorCaja1,
                "valorCaja2" : valorCaja2
        };
        $.ajax({
                data:  parametros,
                url:   'ejemplo_ajax_proceso.php',
                type:  'post',
                beforeSend: function () {
                        $("#resultado").html("Procesando, espere por favor...");
                },
                success:  function (response) {
                        $("#resultado").html(response);
                }
        });
}
</script>

</head>

<body>

Introduce valor 1

<input type="text" name="caja_texto" id="valor1" value="0"/> 


Introduce valor 2

<input type="text" name="caja_texto" id="valor2" value="0"/>

Realiza suma

<input type="button" href="javascript:;" onclick="realizaProceso($('#valor1').val(), $('#valor2').val());return false;" value="Calcula"/>

<br/>

Resultado: <span id="resultado">0</span>

</body>

</html>

 

En este código, utilizamos los id de las cajas de texto para pasarle sus valores a la función realizaProceso. En esta función recogemos los valores de entrada en un array parametros y enviamos mediante AJAX especificando el parámetro data (datos que mandamos), url (dirección del archivo de proceso) y type (POST o GET).

Por último vemos que tenemos dos eventos: beforeSend y success donde podemos indicar la acción a realizar mientras se procesan los datos y tras terminar de procesarlos (en este caso jugar con el contenido HTML del id resultado).

Ahora vemos el archivo de procesamiento de datos (ejemplo_ajax_proceso.php) que únicamente suma los datos recibidos por POST:

<?php 
$resultado = $_POST['valorCaja1'] + $_POST['valorCaja2']; 
echo $resultado;
?>

Comentarios

Comentario de marius - 15 de Marzo de 2011 - 23:27
Soy un autodidacta del la programacion, y siempre encuentro ayuda para seguir progresando. Puedo contar con vosotros para ello?. Como podriammos hacerlo?. Gracias anticipadas. om:marius
Comentario de Maxi - 08 de Julio de 2011 - 05:38
gracias, busque por todos lados algo asi de sencillo y no encontraba. muy buena la pagina
Comentario de rafa - 28 de Marzo de 2012 - 02:44
oie trate de correr tu ejemplo pero no hace nada :(
Comentario de Christian Miranda - 15 de Junio de 2012 - 16:31
Perfecto, te agradesco me sirvio el ejemplo, ahy que tomar encuenta las rutas del jquery amigos!..... le puse asi el directorio: js/jquery.js index.php procesar.php y en el index modifique y le puse de esta manera: <html> <head> <title>Ejemplo sencillo de AJAX</title> <script type="text/javascript" src="js/jquery.js"></script> <script> function realizaProceso(valorCaja1, valorCaja2){ var parametros = { "valorCaja1" : valorCaja1, "valorCaja2" : valorCaja2 }; $.ajax({ data: parametros, url: 'procesar.php', type: 'post', beforeSend: function () { $("#resultado").html("Procesando, espere por favor..."); }, success: function (response) { $("#resultado").html(response); } }); } </script> </head> <body> Introduce valor 1 <input type="text" name="caja_texto" id="valor1" value="0"/> Introduce valor 2 <input type="text" name="caja_texto" id="valor2" value="0"/> Realiza suma <input type="button" href="javascript:;" onclick="realizaProceso($('#valor1').val(), $('#valor2').val());return false;" value="Calcula"/> <br/> Resultado: <span id="resultado">0</span> </body> </html> y en la cree un archivo php con el nombre de procesar.php <?php $resultado = $_POST['valorCaja1'] + $_POST['valorCaja2']; echo $resultado; ?> Que es el mismo, es un execelente aporte de antemano mil disculpas por modificar el codigo fuente.
Comentario de Michael - 17 de Junio de 2012 - 22:55
Hola, muchas gracias por el ejemplo está simple para aprender pero tiene lo suficiente para que sea muy útil.
Comentario de Artemio Cruz - 07 de Agosto de 2012 - 17:59
Muy buen ejemplo amigo, es lo que estaba buscando. Gracias.
Comentario de german - 08 de Agosto de 2012 - 20:09
Muy buen ejemplo "mejor no podría estar" para las personas que deseamos introducirnos en ajax.
Comentario de Cruz - 10 de Agosto de 2012 - 20:49
como lo impleto en java utilizando jsp y struts
Comentario de nickenino - 06 de Octubre de 2012 - 19:09
Gracias!
Comentario de thony - 25 de Diciembre de 2012 - 17:12
por fin me corrio, la ruta de jquery la escribi mal le puse asi: js/jquery-1.8.3.min.js" y si corrio. Chevere el ejemplo es un buen Hola Mundo en Ajax, Gracias..!!
Comentario de armando - 26 de Diciembre de 2012 - 22:44
felicidades muy buen aporte, con esto entendi algo escencial que me hacia falta .... gracias
Comentario de jose - 07 de Enero de 2013 - 10:16
Muchísimas gracias por este ejemplo tan clarificador que me ha dado luz después de una semana de desesperación :) Enhorabuena por el blog, porque merece mucho la pena!
Comentario de Pedro - 10 de Enero de 2013 - 23:17
Hola! es muy interesante el código de ejemplo, pero tengo una duda: El archivo de Ajax lo tienes en la misma carpeta www de PHP? o lo ejecutas desde una carpeta externa? Saludos!
Comentario de Emmanuel - 20 de Febrero de 2013 - 18:45
no me funciono lo puse tal cual... mepodrias enviar los 2 archivos para ver a detalle en que falle
Comentario de Matías - 18 de Abril de 2013 - 05:46
Hola tengo una consulta, mira tengo un conjunto de checkbox cada uno con un id propio, resulta que al precionar un checkbox se activa un ajax el cual me retorna la respuesta en un elemento con id ="respuesta". Pero resulta que yo necesito que cada vez que se presione un check se inserte la respuesta y no se elimine. Ya que como esta implementado cada vez que pincho un check la respuesta del ultimo presionado se pisa la anterior. Espero tus comentarios.
Comentario de jose puga - 19 de Abril de 2013 - 21:03
muy buen post. gracias
Comentario de Henry - 21 de Abril de 2013 - 15:57
Excelente, muchas gracias
Comentario de Boris c - 15 de Mayo de 2013 - 01:22
Muy bueno lo es lo que estaba buscando y lo encontré me sirvió de mucho muchas gracias, muy buen aporte
Comentario de zegol - 20 de Mayo de 2013 - 20:46
Hola a todos y primero al que ha compartido los conocimientos. Nada que darte las millones de gracias porque me has salvado la vida. Estoy en un proyecto y de verdad estaba en la necesidad de enviar datos a la base de datos sin RECARGAR la página y AJAX me salvó. Trabajo con JavaScript, PHP, Jquery(librería), pero la parte Ajax nunca he tocado, ni tampo como function de Jquery y hoy estaba entre la necesidad. Gracias de verdad.
Comentario de carlos - 24 de Mayo de 2013 - 00:39
hola a todos,tengo una pregunta como hago para que el string que retorna del php sea puesto en una caja de texto html y no en una marca.
Comentario de Gonzalo Cueto Navarro - 26 de Junio de 2013 - 04:29
Excelente articulo. Vino a dar forma a varias ideas en las que estaba bloqueado. Muchisimas gracias
Comentario de Rodrigo - 09 de Julio de 2013 - 17:45
Tengo un problema con la respuesta, no obtengo nada de respuesta, pero me consta que se ejecuta el PHP. qué podrá ser?
Comentario de harold - 01 de Agosto de 2013 - 21:27
de donde saco la libreria jquery que mencionas en el codigo y como la incluimos? gracias
Comentario de Oriol Jara Tarque - 23 de Agosto de 2013 - 12:54
Genial ejemplo. Sencillo y al grano. Muchas gracias ;)
Comentario de Ceregatti - 26 de Agosto de 2013 - 20:18
Al fin comprendi esto del metodo post para consumir web service. Gracias.
Comentario de karlothe - 05 de Septiembre de 2013 - 18:44
Gracias por el code ;) se agradece algo sensillo y al grano para empezar :)
Comentario de miguel - 03 de Octubre de 2013 - 06:09
no me funciona este ejemplo, puse un mensaje (echo "estoy en procesa.php") al archivo procesa.php, pero parece que nunca entra a ejecutar este archivo, alguna idea de que estoy omitiendo? Muchas gracias.
Comentario de Maira Villa - 03 de Octubre de 2013 - 19:40
Gracias esta chever el codigo pero queria preguntar como hago para emviar un array de php recibirlo en ajax con post y recorrerlo con el metodo $.each()......
Comentario de Victor - 28 de Octubre de 2013 - 15:42
Hola, gracias por este aporte, tengo una duda si en ves de hacer una suma hacemos una consulta a una base de datos como podemos mostrar los resultados en campos de texto separados en vez de mostrarlo en el div $("#resultado").html(response); si obtuviera un nombre y un apellido como los muestro en una caja nombre y otro apellido. Saludos cordiales.
Comentario de David - 04 de Noviembre de 2013 - 20:55
Hola,tengo una duda de como pasar los datos en ajax de archivo php a otro arhivo ya que al usar include o require me copia los datos con los valores iniciales y no despues de capturarlos con $_GET como quiero. Gracias por la Ayuda
Comentario de oski - 20 de Diciembre de 2013 - 17:10
muy bueno el comentario me sirvio de mucho
Comentario de Sebastian - 31 de Enero de 2014 - 17:31
Hola esta muy bueno el código, me pregunto si desde el ejemplo_ajax_proceso.php funciona algo asi: echo "<script language='javascript'> alert('HOLA')</script>";
Comentario de Bryra - 14 de Febrero de 2014 - 20:03
Muchas gracias, por tu aporte amigo!!! Anduvo genial! Saludos!
Comentario de aitorxs - 21 de Febrero de 2014 - 23:16
muchas gracias amigo!! justo lo que estaba buscando
Comentario de josue - 25 de Febrero de 2014 - 06:49
Muchas Gracias!!!! buscaba algo así de sencillo para entenderlo con esto podre completar mi proyecto php y eliminar tanto envío de variables por php, recuerden que tienen que correr algo como XAMP para que funcione php sin necesidad de subirlo a un servidor y también cambiar la ruta de jquery para que funcione el ejemplo
Comentario de gregorio - 03 de Marzo de 2014 - 22:08
Excelente ejemplo, simple y bien enfocado. Gracias mil!!
Comentario de Oscar - 26 de Marzo de 2014 - 18:07
Porque cuando ejecuto la suma en el resultado me sale por ejemplo esto: 118 12 siendo mi suma 6 + 6 o en cualquira que hago primero sale 118, agradecere tu respuesta
Comentario de Shamir Cáceres - 13 de Mayo de 2014 - 23:47
me ayudara bastante
Comentario de daniel - 16 de Mayo de 2014 - 18:41
Saludos, muy buena la publicación, pero tengo un problema, realizo la consulta y se muestra, pero no en los campos que requiero, ya que me aparece en los 2 y requiero que salga un dato en una campo y el otro en un campo diferente.
Comentario de Jaime - 03 de Junio de 2014 - 19:19
GRACIAS!!!!! Muy buen aporte, sencillo y claro ;)
Comentario de Miguel Dario - 11 de Junio de 2014 - 18:57
Gracias, lo probé en Netbeans 8 con XAMPP sin ningún problema.
Comentario de Luis - 20 de Junio de 2014 - 20:26
Funciona, Pero Como hago para que el archivo formulario.php este en otro dominio? Gracias..
Comentario de Toni - 02 de Julio de 2014 - 13:55
Buen ejemplo, siempre va bien empezar con algún ejemplo así.
Comentario de sergio - 21 de Julio de 2014 - 02:43
excelente tuto, no tienes algo para mostrar datos tipo grid enforma dinamica. gracias
Comentario de Javier - 22 de Agosto de 2014 - 22:41
Excelente artículo, me ha servido para lanzarme en esta técnica de la que leía y oía. Gracias.
Comentario de Jesus perez - 28 de Agosto de 2014 - 22:10
Saludos a todos... Gracias por aporte. pero me gustaria que la pagina "procesar.php" fuese la misma pagina "index.php" pero no consigo modo alguno de hacer que se reenvie a si mismo solo con el resultado que necesito. es muy buen ejemplo pero no reduce en nada la cantidad de paginas que se deben tener. es lo mismo que hacerlo con funciones desde php regargando la pagina o incluso desde la misma pagina. pero nose me parece que a estas altura es inadmisible pensar que no puedo usar AJAX para enviar informacion desde JAVASCRIPT desde la misma pagina crear una sola pagina que evie y reciba datos... de esta forma creo que solo engañamos al ojo pero no al cerebro... aguien que me ayude a generar una solucion real se lo agadeceria
Comentario de Hector - 17 de Septiembre de 2014 - 21:53
Si quisiera retornar al formulario un campo consultado de una BD Mysql, como debe ir el archivo procesar ?
Comentario de patrici0 - 23 de Septiembre de 2014 - 16:15
no puedo agregar otra caja de texto no funciona yu tampoco cambiarle el nombre al php
Comentario de Berna Suárez - 01 de Octubre de 2014 - 18:32
buen dia excelente aporte, soy novato en esto de la programación, estoy realizando una tabla donde el costo lo multiplico por la cantidad y muestro el resultado en la misma tabla eso lo hace de maravilla pero solo en el primer registro y en la primera tabla, tengo varios registros y varias tablas. alguien me pudiera dar un consejo de como hacerlo, de antemano gracias.
Comentario de oscar - 01 de Octubre de 2014 - 22:15
Muy buen tutotrial didactico, todo sale bien pero No me funciona para internet explorer
Comentario de Alan - 11 de Noviembre de 2014 - 19:38
Todo increible, algo asi de sencillo buscando por la web y nada, solo en este blog, y que mejor en español! GRACIAS!
Comentario de Sol - 23 de Noviembre de 2014 - 00:43
Excelente, justo lo que necesitaba. Muchas gracias.
Comentario de jonny - 01 de Diciembre de 2014 - 00:06
byen aporte le puse el type: 'post', y ok funciono
Comentario de Fernando León - 09 de Diciembre de 2014 - 06:02
Buenas Noches: Muy bueno el ejemplo, facilita la comprensión de AJAX; He implementado un codigo para insertar datos a una db y he estoy exprimentando problemas. Aca link del tema en T! en la comunidad de diseño y programación web. Quizas puedas hechar un ojito y colaborarme un poco. http://www.taringa.net/comunidades/webdesign/9099651/Ayuda-con-peticion-AJAX.html#comment-548167 Gracias nuevamente. Un abrazo desde Bogota, CO
Comentario de Miguel - 07 de Enero de 2015 - 02:39
Alguien me puede indicar porqué se pone la instrucción return false después de llamar a la función realizaProceso?. Gracias.
Comentario de Kristian Ivan Arenas - 11 de Enero de 2015 - 20:49
Me sirvio mucho este ejemplo, muchas gracias
Comentario de Edgard - 16 de Enero de 2015 - 14:32
Muchas gracias, me sirvió de mucho
Comentario de Omar Soto - 31 de Enero de 2015 - 19:06
.fail(function(response){ $('div.ack').html("Datos de usuario incorrectos..."); console.log(response.responseText); }) Asi me funciono a mi...
Comentario de Javier - 25 de Febrero de 2015 - 05:19
Excelente! Me ha servido de mucho... (y)
Comentario de Yaiko - 02 de Marzo de 2015 - 02:41
Muy buen tutorial, muchas gracias, ya que apenas ando empezando con el Jquery ya PHP al 100%.
Comentario de Dani - 10 de Marzo de 2015 - 15:05
Perfecto! gracias!!
Comentario de Alejandro R - 30 de Abril de 2015 - 04:56
Muy bueno el aporte. Muy claro
Comentario de basco - 10 de Mayo de 2015 - 07:56
gracias! me sirvio para intentar entender un poco de como funciona ajax con jquery
Comentario de nils - 19 de Mayo de 2015 - 16:58
Gracias , esta bien el ejemplo.
Comentario de Gigi - 19 de Mayo de 2015 - 18:40
Muy buen ejemplo para los que estamos retomando interfaces y sus tecnologías más concurridas en curso. Gracias
Comentario de Jose Rios - 02 de Julio de 2015 - 18:59
Como puedo hacer para validar los campos ?
Comentario de javier - 11 de Julio de 2015 - 16:05
Hola Sebastian. Respondo a la entrada de sept.2014, que acabo de ver. Ante tu pregunta, seguro que ya lo has hecho, pero por si alguien le puede ser util. Si, se puede introducir un alert desde php en el fichero php pones algo como: $resultado = $_POST['valorCaja1'] + $_POST['valorCaja2']; $resultadovar ="<span>$resultado</span>"."<script language='javascript'> alert('HOLA')</script>"; echo $resultadovar; Es decir, metes $resultado dentro de un contenedor con su etiqueta de cierre y a continuacion el elemento script. Todo esto es devuelto y desde el fichero llamante lo metemos en otro div. En lugar de span, lo cambiamos, y ponemos div. ALgo asi. La regla: Añadir el elemento completo ya que <script> no puede estar en medio de una etiqueta de linea, pero si en una de bloque como <p>, <h>, <div>, etc.. <div id="ventanaResultado"> <p>El Resultado es:</p> <h3><div id="resultado"><span>0</span></div></h3> </div> Lo que hay dentro del <div id="resultado"> es sustituido por $resultadovar. Espero que te ayude Gracias al originador. Un ejemplo simple, pero con el que se puede investigar una gran cantidad de escenarios $.ajax-php
Comentario de Alfonso - 01 de Agosto de 2015 - 20:03
Me sirvio como no tienes una idea! Gracias!
Comentario de Renzo - 04 de Diciembre de 2015 - 19:50
gracias. excelente trabajo...
Comentario de Luis - 04 de Diciembre de 2015 - 22:11
Estimado. Tu explicación de ajax me ha servido mucho. Muchísimas gracias :)
Comentario de Ruben - 15 de Enero de 2016 - 12:44
Buenas! una duda simple, si la pagina que recoge los datos es la misma, en el parametro url:"" , que pones?
Comentario de JUAN LINARES - 22 de Enero de 2016 - 06:55
Gracias por compartir tus conocimientos, esto me ha servido mucho
Comentario de C3media - 11 de Febrero de 2016 - 20:24
Hola, muchas gracias por el aporte; a los que no les funciona recuerden que deben tener la librería Jquery, llámala desde un CDN así: https://code.jquery.com/jquery-1.12.0.min.js Saludos!
Comentario de luis manuel - 26 de Febrero de 2016 - 15:48
no funciona porque el no esta declarado de ¿donde lo puedo sacar? /js/jquery.js
Comentario de Carlos - 08 de Junio de 2016 - 20:00
Tengo los datos iguales, pero no tengo idea de porque no me pasa los datos al php, hago el caculo y luego me paso a la pagina de ejemplo_ajax_proceso.php y no me salen los datos, tengo el cdn, igual hice un console log en el success y me pasa el resultado, pero no me pasa al php
Comentario de maxi - 26 de Junio de 2016 - 19:33
excelente aporte amigo, de maravilla!
Comentario de Lenis - 29 de Junio de 2016 - 16:47
Gracias por el ejemplo, muy bueno para adentrarse en el mundo de ajax!
Comentario de Germán - 07 de Julio de 2016 - 05:40
Muchas gracias por el aporte amigo... +10000
Comentario de darox - 10 de Julio de 2016 - 19:35
Tal y como está, no me funcionó, el error estaba en el boton, el valor onclick es este: onclick="imprimir($('input[name=producto]').val(),$('input[name=cantidad]').val()); return false;"
Comentario de Manuel Priego - 27 de Julio de 2016 - 07:50
Muchas gracias por el ejemplo, es bastante bueno para empezar a entender una tecnología como AJAX. Continua así. :)
Comentario de Yovanny - 05 de Agosto de 2016 - 16:26
Amigo muchas gracias, interesante aporte... soy nuevo en esta clase de tecnologia y me gustaria saber como hacer en el caso q quiera que me regrese mas de un valor. ejemplo: envio dos o mas numeros y me regrese, cual es mayor y el menor, la suma de ambos y el promedio por decir algo... tal vez es algo facil pero como dije soy nuevo...
Comentario de Maria - 21 de Agosto de 2016 - 15:54
Excelente ejemplo!
Comentario de clemente - 06 de Septiembre de 2016 - 06:39
Este ejemplo me ilustra AJAX, nunca le había entedido. Muy agradecido.
Comentario de Gonzalo - 07 de Septiembre de 2016 - 14:10
Muchas gracias por el código, andaba buscando esto para utilizarlo en un formulario con modal de bootstrap.
Comentario de pool - 27 de Septiembre de 2016 - 08:11
Se puede ejecutar todo este codigo sin un servidor web?
Comentario de Brayan - 27 de Enero de 2017 - 16:15
Gracias es sencillo y entendible, la red ocupa mas gente como ustedes.
Comentario de Cristian - 22 de Febrero de 2017 - 06:51
Excelente ejemplo... sólo una cosa xq el return..false
Comentario de ciu6as - 23 de Abril de 2017 - 21:25
gracias por la explicación, muy interesante
Comentario de Luis Enrique - 24 de Abril de 2017 - 08:11
Muy bueno de verdad, me ayudo bastante, recien empiezo con Ajax y este es el ejemplo mas práctico y entendible que he visto hasta ahora, gracias por compartir esto con quienes lo necesitamos!!!
Comentario de Luther - 06 de Mayo de 2017 - 13:45
Indeed, this a great Ajax's "Hello word" example. Nice job.
Comentario de Raul - 14 de Mayo de 2017 - 00:40
Un gran ejemplo!!! Me sirvio a la perfección!!
Comentario de Luis Correa - 05 de Julio de 2017 - 14:57
Muchas gracias su código ha sido de mucha ayuda
Comentario de Harvin - 28 de Julio de 2017 - 04:48
Buen ejemplo, muy claro y específico.
Comentario de Julian Canche - 09 de Agosto de 2017 - 09:35
Parecera muy de tontos, pero no se olviden cambiar la ruta de su archivo jquery, jajaja aveces por errores muy torpes como esos, podemos tardarnos horas, tomenlo en cuenta, saludos...
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí