En este breve tutorial les voy a explicar como utilizar la forma mas básica de AJAX con Jquery: $.ajax y enviar un grupo de variables a un archivo PHP, al igual que mostrar un indicador al usuario de que se está procesando su solicitud.
Paso 1.- Primero que nada debes incluir la librería de Jquery en tu página (ya sea HTML o PHP) por medio de una etiqueta <script>:
<script src=“http://code.jquery.com/jquery-1.5.js“></script>
Paso 2.- Ya teniendo la librería en nuestro página podemos ejecutar $.ajax();
$.ajax se usa de la siguiente manera:
$.ajax({
type :“post”,
url : “recibe.php”,
data : “variable1=”+parametro_1+“&variable2=”+parametro2+“&variable3=”+parametro_n,
beforeSend :function()
{
//En esta sección podemos poner un aviso de cargando. Para este ejmplo estoy poniendo el aviso dentro de un div
$(“#visor_mensajes”).html(“Enviando datos cargando”);
},
success:function(respuesta){
$(“#visor_mensajes”).html(“Datos procesados la respuesta fue del PHP fue “+respuesta);
}
});Paso4.- Ejecutar la función por ejemplo con un click de botón
<input type="button" onclick="funcion_ajax('Nombre','Apellido','otros datos');" value=" Ejecutar "/>Descripción de parámetros
Parámetro Descripción type Determina el tipo de envio que se hará puede ser post o puede ser get.Si usas envio post y deseas recuperar la variable con PHP deberás usar $_POST[] sobre tus variables url Este es el nombre del archivo al que deberás enviar tus variables data La definición de variablesPor ejemplonombre=Carlos&apellido=GonzalesCada valor debe ser dividido por el simbolo & beforeSend: Este es un estado en el proceso de envio de variables y hace referencia a las acciones que se pueden hacer ANTES DE ENVIAR, las variables, un sencillo ejemplo es Mostrar un mensaje al usuario. Su sintaxis siempre deberá serbeforeSend :function(){}, success: Este es el último estado del proceso de envio y se ejecuta cuando todas las variables han sido enviadas y ha habido una respuesta por el archivo definido en url.Su sintaxis essuccess: function(respuesta){//Lo que está en parentesis será ejecutado despues del envio ajax} Nota: la variable respuesta, almacenará todo el HTML impreso en el archivo url
Nota: Cada parametro va precedido por dos puntos por ejemplotype : “post”
Y para poder recuperar las variables debemos de usar
$_POST[“variable”] si estoy usando un type:”post” y $_GET[“variable”] si uso type:”get”
Hello, just wanted to say, I enjoyed this article.
It was practical. Keep on posting!
MAny Many thanks!!
It’s an amazing piece of writing in support of all the internet users; they will get advantage from it I am sure.
Many Thanks Rose!!
Send you many regards from México!
Thanks for you comments!
Hi there! Do you know if they make any plugins to help
with SEO? I’m trying to get my blog to rank for some targeted keywords but I’m
not seeing very good results. If you know of any please share.
Appreciate it!
Hola, tengo un problema con este scripts http://jsbin.com/zibud/1/edit
No me valida el formulario.
Gracias
Hola.
Según veo no tienes agregado la biblioteca de Jquery.
Se lo agregué y ya funciona.
¿Puedes revisar?
El script php funciona bien validando el recaptcha, pero no procesa los datos del formulario subidos por ajax, porque las variables post me aparecen sin valores. Cuando veo la pagina con firebug me aparacen los post solo de las variables del captcha (“recaptcha_challenge_field”: y,”recaptcha_response_field”). No entiendo!!
Voy camino a casa. Llegando hago la prueba en mi server local.
Seria bueno que del lado del servidor hagas un print_r($_POST); para ver que te arroja.
Igual prueba concatenando las variables de la siguiente forma
data : “mivariable1=”+var1+”&mivariable2=”+var2
Y quitar el datatype.
A me cuentas. Regreso en un rato
Algo no camina, te dejo el http://jsbin.com/coriv/1/edit y el formulario:http://www.comerex.cl/Muse1/contacto.phtml.
Le hice varios cambios.
y el validador php:
is_valid) {
$to=”contacto@comerex.cl”;
$from=”Nuevo Cliente”;
$email .”$Email”;
$mailheaders = “From: $from\n”;
$msg_body = “DATOS CLIENTE\n\n”;
$msg_body .= “———————————————————–“;
$msg_body .= “\nNOMBRE: ” . $Nombre;
$msg_body .= “\n\nE-MAIL: ” . $Email;
$msg_body .= “\n\nMENSAJE: ” . $Mensaje;
mail($to,$from,$msg_body);
echo “Ok”;
} else
?>