Como usar ajax $.ajax con Jquery y PHP

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”

DEMO

 

 

 

About these ads

11 thoughts on “Como usar ajax $.ajax con Jquery y PHP

  1. 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!

      • 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

  2. 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

    ?>

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s