Système de login

Version imprimable

Système de login

Bonsoir à tous, j'essaie de faire un système de login jquery.
formulaire

Code:

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
<div class="login-box-body">
          <p class="login-box-msg">Connectez vous</p>
 
          <form id="login" method="post">
              <div class="form-group has-feedback">
                <input type="email" name="email" class="form-control" placeholder="Email">
                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
              </div>
              <div class="form-group has-feedback">
                <input type="password" name="password" class="form-control" placeholder="Mot de passe">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
              </div>
              <div class="row">
                <div class="col-xs-8">
                  <div class="checkbox icheck">
 
                  </div>
                </div>
                <!-- /.col -->
                <div class="col-xs-4">
                  <button id="valider" class="btn btn-primary btn-block btn-flat">Connexion</button>
                </div>
                <!-- /.col -->
              </div>
              <div class="row" id="msg_erreur">
                <span> </span>
              </div>
          </form>
          <!-- /.social-auth-links -->
          <a href="javascript:;">Mot de passe oublié ?</a><br>
       </div>

coté javascript :

Code:

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
<script>
    $(document).ready(function(e){
      $('#valider').on("click", function(e){
              url = '<?php echo base_url().'index.php/login' ?>';
              var donnee = $("#login").serialize();
            // console.log(donnee)
            // var donnee1 = $("#login").serializeArray();
            $.ajax({
                    data : donnee,
                    method: "POST",
                    url: url,
                    dataType: "json",
                    success: function(data){
                      console.log("bien");
                    }
 
                }).done(function(data){
                    if(data["error"]){
                            console.log( "erreur");
                          // $('#message').html("Mail ou mot de passe incorect")
                        }else{
                        console.log("ok")
                        }
                }).fail(function(jqXHR, textStatus, errorThrown){
 
                    console.log("echec de la requête ")
                })
 
        })
    });
 
  </script>

Quand je valide la requête échoue, je reçois dans la console le message "echec de la requête"

23/04/2018, 21h53
mathieu

regardez dans la console de développement, onglet '"réseaux" pour voir ce qui pose problème avec la requête.
23/04/2018, 23h21
cobos

Je ne vois aucun problème dans l'onglet réseau, je reçois les deux paramètres mais dans l'onglet réponse rien
24/04/2018, 10h50
NoSmoking
Bonjour,
la première des choses à faire est quand même d'afficher l'erreur dans la console !
Code:

1 2 3 .fail(function(jqXHR, textStatus, errorThrown){ console.log("echec de la requête ", errorThrown); })

Bonjour
Envoie nous le type d'erreur retournée
Au fait tu risques d'avoir des soucis avec ta requete car il vaudrait mieux utiliser e.preventDefault()
Et tu as oublié un point virgule je te le rajoute dans le code source a la fin du message
Ensuite ca risque pas de marcher non plus car method='POST' c'est pour un form et non une requete Ajax... tu dois utiliser type:'POST'

Pourquoi tu n'utilises pas seulement (au choix)

Code:

1
2
3
4
 
$('#login').submit(function(e) {
   e.preventDefault()
...

ou tu mets un bouton à l'extérieur

Code:

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
 
$('#buttonexterieur').click(function(e) {
           e.preventDefault()
           url = '<?php echo base_url().'index.php/login' ?>';
              var donnee = $("#login").serialize();
            // console.log(donnee)
            // var donnee1 = $("#login").serializeArray();
            $.ajax({
                    data : donnee,
                    type: "POST",
                    url: url,
                    dataType: "json",
                    success: function(data){
                      console.log("bien");
                    }
 
                }).done(function(data){
                    if(data["error"]){
                            console.log( "erreur");
                          // $('#message').html("Mail ou mot de passe incorect")
                        }else{
                        console.log("ok")
                        }
                }).fail(function(jqXHR, textStatus, errorThrown){
 
                    console.log("echec de la requête ", errorThrown)
                })
 
        });
    });

Et personnellement j'utiliserais plutôt success et error que .done et .fail
Cordialement