Simple formulaire login Ajax

Default
,

Bonjour,

Voila je rencontre un petit problème avec mon code.

Décrivez ici votre code ou ce que vous cherchez à faire

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="author" content="THIRIONET Thierry" />
    <meta name="description" content="social network, réseau social, teachers, Teachers du net, TDN, tdn">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Responsive registration form</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <style type="text/css">
        .alert-class,.register-class,.forgot-class{
            display: none;
        }
    </style>
</head>
<body class="bg-dark">
    <div class="container mt-4">
        <div class="row">
            <div class="col-lg-4 offset-lg-4 alert-class" id="alert">
                <div class="alert alert-success">
                    <strong id="result"></strong>
                </div>
            </div>
        </div>
        <!-- Login Form -->
        <div class="row">
            <div class="col-lg-4 offset-lg-4 bg-light rounded" id="login-box">
                <h2 class="text-center mt-2">Login</h2>
                <form method="post" role="form" class="p-2" id="login-form">
                    <div class="form-group">
                        <input type="input" name="username" id="username" placeholder="Entrez votre nom utilisateur" class="form-control" minlength="3" required>
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" id="password" placeholder="Entrez votre mot de passe" class="form-control" minlength="6" required>
                    </div>
                    <div class="form-group">
                        <input type="submit" name="login-btn" id="login-btn" value="Connexion" class="btn btn-primary btn-block">
                    </div>
                </form>
            </div>
        </div>
        <script
                src="http://code.jquery.com/jquery-3.3.1.min.js"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
                crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>

        <script>
            $(document).ready(function(){
                $("#login-lnk").click(function(){
                    $("#register-box").hide();
                    $("#login-box").show();
                });

                $("#login-form").validate();

                $("#login-btn").click(function(e){
                    if (document.getElementById('login-form').checkValidity()){
                        e.preventDefault();
                        $.ajax({
                            type: "post",
                            url: "register.php",
                            data:$("#login-form").serialize()+'&action=login',
                            success:function(response){
                                window.alert("login function");
                                $("#alert").show();
                                $("#result").html(response);
                            }
                        });
                    }

                    return true;
                });
            });
        </script>
    </div>
</body>
</html>

Ce que je veux

Je fais simple un "print_r($_POST);" dans la page que le click sur le bouton "login-btn" est censé appeler.

Ce que j'obtiens

Apparemment, il n'appelle pas la page "register.php".

5 Réponse

44227
,

Essaie de mettre ton url en valeur absolute (ex: localhost/monprojet/register.php)

Default
,

Bonjour à vous,

tout d'abord, encore merci pour votre réponse.

J'ai essayé votre truc mais ça ne changeait rien du tout.

En fait, j'ai réussi à résoudre le problème.

Je pense qu'il y avait un conflit parce que j'utilisais 2 librairies jQuery : "jquery-3.3.1.min.js" et "jquery-3.3.1.slim.min.js".

Maintenant, le script Ajax fonctionne bien.

Par contre, existe-t-il des outils intéressants pour pouvoir débugger de l'Ajax ?

Merci d'avance

Bonne journée
Thierry

44227
,

La console développeur de google chrome est très bien, tu peux voir tes appels ajax dans la partie network (ctrl+maj+i) pour y accéder.

Default
,

Merci pour votre réponse.

Bonne journée
Thierry

44227
,

Pas de problèmes, pense a mettre le sujet en résolu.

Bonne journée