Tema: Ajax con la funcion Load
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 20/03/2012, 11:20
Avatar de Naahuel
Naahuel
 
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 8 meses
Puntos: 192
Respuesta: Ajax con la funcion Load
Yo te propondría los siguientes cambios:

Prueba: http://nahueljose.com.ar/ejemplos/ajax-test/
Código:
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Formulario</title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  7. <script type="text/javascript" language="javascript">
  8. $(document).ready(function(){
  9.     //objetos del dom que uso con frecuencia
  10.     var img_cargando = $("#cargando");
  11.     var cont_destino = $("#destino");
  12.     var formulario = $('#formulario');
  13.     //asignación de evento
  14.     formulario.submit(function(evento){
  15.         evento.preventDefault();            //no enviar el formulario
  16.         img_cargando.show();                //mostrar cargando
  17.         //generar datos
  18.         var datos = formulario.serialize();
  19.         //pedido ajax
  20.         var pedido = $.ajax({
  21.             url : 'mostrar-datos.php',
  22.             data : datos,
  23.             cache : false
  24.         });
  25.         //cuando el pedido esté listo...
  26.         pedido.done(function(resultado){
  27.             img_cargando.hide();            //ocultar cargando
  28.             cont_destino.html(resultado);   //cargar el resultado
  29.         });
  30.         //limpiar el formulario
  31.         formulario.each(function(){
  32.             this.reset();
  33.         });
  34.     });
  35. });
  36. </script>
  37. <style type="text/css">
  38. body{
  39.     background-color:#444;
  40.     color:#FFF;
  41. }
  42. h2{
  43.     text-align:center;
  44.     font-family:Verdana, Geneva, sans-serif;
  45.     font-size:28px;
  46. }
  47. .contiene-formulario{
  48.     width:500px;
  49.     background-color:#222;
  50.     color:#FFF;
  51.     border-radius:8px;
  52.     margin:auto;
  53.     font-size:22px;
  54. }
  55. .formulario{
  56.     margin-left:10px;
  57.     margin-right:10px;
  58. }
  59. .boton{
  60.     border-radius:8px;
  61.     font-size:18px;
  62.     background-color:#444;
  63.     color:#FFF;
  64. }
  65. .cargando{
  66.     display:none;
  67. }
  68. .nofloat{
  69.     clear:both;
  70. }
  71. .destino{
  72.     width:500px;
  73.     background-color:#222;
  74.     color:#FFF;
  75.     border-radius:8px;
  76.     margin:auto;
  77.     font-size:22px;
  78.     margin-top:25px;
  79. }
  80. .destino p{
  81.     margin-left:10px;
  82. }
  83. </style>
  84. </head>
  85.  
  86. <body>
  87. <h2>Envio de datos mediante jquery y la funcion load</h2>
  88. <div class="contiene-formulario"><br />
  89.   <form id="formulario" name="formulario" class="formulario" method="get" action="">
  90.   <fieldset><legend>Datos para el registro:</legend>
  91.   <table width="85%" align="center">
  92.       <tr>
  93.         <td width="30%">Nombre:</td>
  94.         <td width="70%"><input type="text" name="txtNombre" id="txtNombre" /></td>
  95.       </tr>
  96.       <tr>
  97.         <td>Apellidos:</td>
  98.         <td><input type="text" name="txtApellidos" id="txtApellidos" /></td>
  99.       </tr>
  100.       <tr>
  101.         <td>Telefono:</td>
  102.         <td><input type="text" name="txtTelefono" id="txtTelefono" /></td>
  103.       </tr>
  104.       <tr>
  105.         <td>Sexo:</td>
  106.         <td>
  107.         <select name="txtSexo" id="txtSexo">
  108.         <option>Masculino</option>
  109.         <option>Femenino</option>
  110.         </select></td>
  111.       </tr>
  112.       <tr>
  113.         <td>Edad:</td>
  114.         <td>
  115.         <select name="txtEdad" id="txtEdad">
  116.         <option>18</option>
  117.         <option>19</option>
  118.         <option>20</option>
  119.         <option>21</option>
  120.         <option>22</option>
  121.         <option>23</option>
  122.         <option>24</option>
  123.         </select>
  124.         </td>
  125.       </tr>
  126.       <tr>
  127.         <td align="right"><input type="submit" name="btEnviar" id="btEnviar" class="boton" value="Enviar" /></td>
  128.         <td align="right"><div class="cargando" id="cargando"><img src="http://s13.postimage.org/55b1f5hqf/loading2.gif" alt="load" /></div></td>
  129.       </tr>      
  130.     </table></fieldset><br />
  131.   </form>
  132. </div>
  133. <div class="nofloat"></div>
  134. <div class="destino" id="destino"></div>
  135. </body>
  136. </html>

Observá lo siguiente:
  • Saqué la obtención de los objetos del DOM fuera de la función. Es más eficiente que recorrer todo el DOM cada vez que se ejecuta la función.
  • Cambié el evento click sobre el botón a un submit para que funcione al presionar enter. Además, hay que cambiar el botón de type="button" a type="submit".
  • Cambié de .load() a $.ajax por muchos motivos. Principalmente porque no es necesario pasar una variable aleatoria a la URL, basta con poner cache:false. Además, podemos usar .serialize(), que permite adaptar este código a cualquier formulario sin estar armando el URL manualmente. Mejor, no? El código queda muuuucho más limpio y comprensible.
  • $.ajax devuelve un .primise() de un deferred, que permite usar .done() para limpiar el código y además usar cuantas funciones callback querramos.

Estas son prácticas que yo siempre trato de seguir para un código de más calidad y sobre todo, que me permita utilizarlo en otros proyectos fácilmente.

¿Se solucionó con esto tu problema? (Yo no lo noté al principio tampoco...)
__________________
nahueljose.com.ar