sep
2010
Enviar los datos de tu formularios HTML a procesarce atraves de un script PHP es sumamente facil con JQuery exiten diferentes funciones, pero la que pondre de ejemplo es la que uso.
<table align="center" style="border:solid 1px #CCC;" cellpadding="3" cellspacing="3"> <tr> <td colspan="2"> Formulario de Envio de Datos con jQuery y PHP </td> </tr> <form id="formulario"> <tr> <td>Dato 1</td> <td><input type="text" name="cjDato1" id="cjDato1" size="40" /></td> </tr> <tr> <td>Dato 2</td> <td><input type="text" name="cjDato2" id="cjDato2" size="40" /></td> </tr> <tr> <td align="center" colspan="2"> <input type="button" name="btEnviar" id="btEnviar" value="Enviar" /> </td> </tr> <tr> <td colspan="2"> <!-- Etiqueta que mostra mensaje --> <div id="status" style="text-align:center;"></div> </td> </tr> </form> </table>
Formulario que captura los datos puede ser un archivo index.html
Incluimos el codigo Javascript ya sea si lo insertamos en el mismo archivo index.html o lo agregamos en una archivo .js
$(document).ready(function(){
$("#btEnviar").click(function (){
var datos = $("#formulario").serialize();//Serializamos los datos a enviar
$.ajax({
type: "POST", //Establecemos como se van a enviar los datos puede POST o GET
url: "archivo.php", //SCRIPT que procesara los datos, establecer ruta relativa o absoluta
data: datos, //Variable que transferira los datos
contentType: "application/x-www-form-urlencoded", //Tipo de contenido que se enviara
beforeSend: function() {//Función que se ejecuta antes de enviar los datos
$("#status").html("Enviando...."); //Mostrar mensaje que se esta procesando el script
},
dataType: "html",
success: function(datos){ //Funcion que retorna los datos procesados del script PHP
if(datos == 1){ //Dato que proviene del script php
$("#status").html("Script procesado satisfactoriamente"); //Mensaje de Satisfacción
}else if(datos == 0){ //Dato que proviene del script php
$("#status").html("Error al procesar script"); //Mensaje de error
}
}
});
});
});
Script que procesara los datos que vienen del formulario.
//El script lo que hara es verificar que los campos del formulario tengan datos
if($_POST["cjDato1"]) != "" && $_POST["cjDato2"] != ""){ //Si los campos tienen valores
echo "1"; Enviamos el valor 1
}else if($_POST["cjDato1"]) == "" && $_POST["cjDato2"] == ""){
echo "2"; Enviamos el valor 2
}
Existen otras funciones que hacen los mismo como JQuery.post(), JQuery.get(), aqui un demo
Me considero una persona con mucha iniciativa y no tengo miedo a tomar decisiones. Este humilde blog esta pensado para publicar mi experiencia con el diseño de sitios web. Me adapto con facilidad a las nuevas situaciones.
A linha de sucesso e error
está com erro de interpretação
if(datos == 1){ // se datos for 1
ficaria assim
if(datos = 1){ // se datos for igual a 1
flw
Pues este codigo lo he probado y funciona correctamente. Subire el codigo fuente para que lo puedas descargar.
22232123
Saludos, muy bueno solo uan pregunta amigo mio, sale todo correcto aplicando este ejemplo sin embargo en Chrome muestra el echo e inmediatamente me recarga la pagina al index, sabes a que se deba esto?, en lugar que se quede el echo en alaapgina
muchas gracias
Hola Karonte gracias por tu comentario, pero le hiciste alguna modificación al código?