AJAX - Por fin lo logre,....

 
Vista:

Por fin lo logre,....

Publicado por DEVILSITO (4 intervenciones) el 03/11/2012 02:32:04
Por fin lo logre, despues de varios intentos y de investigar por aqui y por alla, y algunas respuestas no muy claras que he recibido, pero igual agradezco.
En resumen, puedes cortar y pegar y probar de inmediato solo falta que construyas un PHP basico que devuelva un mensaje cualquiera, solo debes llamarlo valida.php
El codigo que he logrado construir, se inicia desde un html ingresando un usuario y contraseña. El submit es evaluado en el <script> jquery, que a su vez hace una llamada via AJAX al valida.php, este entrega un mensaje que se despliga en un <div> del html con el id correspondiente. Si te fijas, he inhibido la lineas de <FORM>, y asi funciona perfectamente, en caso contrario no emite ninguna respuesta, o sea, falla. La gran duda que tengo es ¿porque es determinante el <FORM>? o ¿que modificacion habria que hacer para que funcionara con la linea donde estan los <FORM> </FORM>
Aqui va el codigo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>JQUERY ---AJAX</title>
   <script src="jquery.js" type="text/javascript"></script>
   <script>
      $(document).ready(function(){
          $("#aceptar").click(
            function(){
                 $.ajax({type: "POST",url: "valida.php",success: function(datos){$("#resultado").html(datos);}});
            })
      });
   </script>
</head>
  <center>
      <h1>Identificación de usuario</h1>
  <center>
  <body OnLoad="document.registrarse.firstName.focus();">
       <!-- <form name="registrarse" id="formu" method='post'> -->
       <table style='border:1px solid #000000; color=#CCFFFF' bgColor="#FFFF99" width="200px">
           <b>Usuario   : </b><input id="usuario" name="firstName1"/>
           <br>
           <b>Contraseña: </b><input type='password' id="contrasena" name="segundocampo" />
           <br>
           <br>
           <td align='center'>
              <input id="aceptar" type="submit" href="#" value="Aceptar" >
              <input type="button" value="Abandona" name="formbutton3" class="boton" onclick="location.replace('about:blank')">
           </td>
       </table>
       <!-- </form> -->
    <div id="resultado">
    </div>
  </body>
</html>


Agradeceria me respondieran quienes han hecho el ejercicio y les haya resultado, pues los "creo" o "me parece", etc,..solo dilataria innecesariamente la solucion, pues este codigo es aplicable y ayudara mucho a quienes estamos comenzando.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
1
Responder

Por fin lo logre,....

Publicado por Jhonny Negrin (1 intervención) el 06/11/2012 23:27:03
Hola!!

Yo cambiaría tu linea de ajax por lo siguiente:

1
$("#resultado").load("valida.php");


tal vez estoy un poco distraido pero no veo cuando envias los datos de los campos!

El formulario no suele dar problemas, pero una recomendacion es unsar el mismo valor en el atributo name e id
1
2
3
4
5
6
7
8
9
10
11
12
13
//para hacerlo fácil XD
 
$(document).ready(function(){
        $("#aceptar").click(validar);
});
 
 
function validar(){
    $("#resultado").load("valida.php?"+$("#formu").serialize());
/**
*Hay otras funciones como .post(), .get(), que se comportan parecido a .load()
*/
}


PS:
Descomenta el form no deberia darte error
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar