3
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

Etiquetas: ,
Comentarios: 5

Post relacionados

  1. Ronaldo

    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

  2. Javier Hernández

    Pues este codigo lo he probado y funciona correctamente. Subire el codigo fuente para que lo puedas descargar.

  3. SAMMY

    22232123

  4. Karonte

    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

  5. Javier Hernández

    Hola Karonte gracias por tu comentario, pero le hiciste alguna modificación al código?

Agrega tu comentario

(Requerido)
(Requerido)

Copyright © 2010 Javier Hernández