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

 

 

 

Anuncios