Tutorial - Envío y recepción de datos con jQuery
Creado y Programado por SoyJoaquin.
Bueno, Creo que como notaran en estas ultimas semanas me estoy enfocando mas que nada a jQuery, Este la única librería
en la que me e enfocado full, Ya parece una droga.
En fin, Creo este tutorial para enseñarles a enviar y recibir datos con jQuery (Ya que por lo que e visto, no hay ninguno publicado referente a esto en el foro).
-Paso 1: Incluir la librería jQuery:Primero vamos a tener que incluir nuestra librería, Para eso utilizaremos las apis que nos ofrece Google Apps o la misma jQuery. En mi caso, prefiero trabajar mejor con Google Apps, ¿Porque?, Servidor mas rápido y confiable.
Para eso ubicaremos la etiqueta
HEAD (
<head>...</head>) en nuestro código HTML. Una vez ubicado procederemos a insertar el siguiente código para adjuntar el archivo js (
JavaScript) a nuestro documento.
Si vas a usar Google Apps:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> Si vas a usar jQuery:<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> Nota: No sugiero que bajen toda la librería y la suban a su servidor ya que esta estando proveniente a la misma empresa, Será actualizada constantemente mejorando errores y agregando nuevas funciones.
-Paso 2: Incluir código:Ya una vez creado el formulario y adjuntado la librería llega el momento de empezar nuestro código. Primero empezamos iniciando el código JS:
<script language="javascript" type="text/javascript">
...
</script>Una vez iniciado procederemos a crear una función
que será llamada al momento de enviar el formulario. después recolectamos los datos de nuestro formulario. Para eso usamos la propiedad
val() de
jQuery. (Se puede hacer también del modo tradicional pero si ya vamos a usar jQuery para esto, Es mejor usarlo para todo, ¿No creen?).
Ejemplo de val():$('ID_DEL_CAMPO').val();Lo que hacemos es recoger el valor del campo cuya "id" sea la seleccionada en el código.
Es decir, Que si tenemos 2 campos de texto en nuestro formulario:
-Nombre del campo: "Nombre",
Id del campo: "
nombre".
-Nombre del campo: "Apellido",
Id del campo: "
apellido".
Vendría siendo de la siguiente manera:
$('#nombre').val();
$('#apellido').val();Como veras, no estamos usando la propiedad "name" de los formularios. En cambio, Estamos usando la propiedad "
id" de los mismos.
Como sugerencia personal, les pido que indiquen la etiqueta de lo que están trabajando. En este caso es un
input, Por lo tanto seria indicado de la misma manera que es indicado en CSS.
Ejemplo:$('input#nombre').val();
$('input#apellido').val();Esto lo digo ya que en el caso de que exista una div o cualquier otro elemento con la misma id, Lo mas seguro es que tire error. Por lo tanto, Buscaremos entre las etiquetas "input" aquel valor "id" que se le fue asignado en el código.
¡Bien!, Continuamos. Ahora para ahorrarnos código vamos a crearle una variable a cada uno de los campos, En el ejemplo anterior, Estamos usando dos campos, por lo tanto, almacenamos esos 2 valores en 2 variables.
Ejemplo:var nombre = $('input#nombre').val();
var apellido = $('input#apellido').val();Lo que realizamos en el código anterior fue guardar el valor del campo cuya "
id" es "
nombre" en una variable llamada "
nombre" y de igual manera con el campo
apellido.
Bien, Continuamos. Lo que aremos a continuación es iniciar ajax de jquery.
Ejemplo:$.ajax();Tendremos que indicar el método en que serán enviados los datos (Los típicos GET y POST), Los datos a enviar, La url a enviar los datos y si queremos, Podremos mostrar una respuesta del archivo PHP que verifica los datos.
Ejemplo:$.ajax({
type: "POST",
data: "nom="+nombre+"&ape="+apellido;,
url: "comprobar.php",
success: function(respuesta){
alert (respuesta);
}
});
Analizando el código anterior veremos que nos encontramos con
type,
data,
url y
success.
type es el método que se usara para el envío de datos (
GET o POST)
data son los datos a enviar, Se escriben de la misma manera como una url de GET.
url es a donde serán enviado los datos.
En la propiedad
data vemos algo interesante:
"
nom="+
nombre+"&
ape="+
apellido;
Como vamos a enviar los datos vía
POST aquí indicaremos el nombre de los post. El del campo cuya "
id" es "
nombre" indicamos que queremos que el POST sea "nom"
(Fue indicado en Rojo en el ejemplo anterior), y en el campo cuya "
id" es "
apellido" indicamos que el nombre del POST es "ape"
(Fue indicado en Rojo en el ejemplo anterior).
El "
success" es lo mas interesante, ya que este es el que devuelve el resultado de la comprobación.
El "
success" Va seguido de una función (
Si es que quieres mostrar datos de la comprobación) que es en donde indicaras la variable que tomara los datos a recibirse.
La "
Respuesta" que recibirá el "
success" será el resultado que se mostraría en la comprobación.
Ejemplo:Si nuestro "comprobar.php" tiene algo como:
<?php
if($_POST['nom'] == "") {
echo "Error: El campo esta vacio.";
}else{
echo "Hola";
}
?>
En caso de que el POST "
nom" (
Indicado anteriormente) se encuentre vacío o con un valor nulo este devolverá en el
success bajo la variable "
respuesta" (
Que indicamos en la función del success), una alerta diciendo: "
Error: El campo esta vacío.", En el caso de que el campo cuya "
id" sea "
nombre" tenga un valor indicado, El
success devolverá una alerta diciendo "
Hola".
Nuestro código a quedado de la siguiente forma:
<script language="javascript" type="text/javascript">
function enviar(){
var nombre = $('input#nombre').val();
var apellido = $('input#apellido').val();
$.ajax({
type: "POST",
data: "nom="+nombre+"&ape="+apellido;,
url: "comprobar.php",
success: function(respuesta){
alert (respuesta);
}
});
}
</script> Después de esto, Empezaras a crear tu código
PHP. En nuestro código anterior, usaras el POST
nomb (
$_POST['nom']) y el POST
ape (
$_POST['ape']) en el mismo, ya de aquí en adelante lo que queda es tuyo.
Agradecimientos a Physlet y westwest por incentivarme en el jQuery.Tutorial creado y Programado por SoyJoaquin.
Espero que les haya ayudado.
