Liens entre AJAX PHP et HTML (Espace membre)

ThomasduCanada
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code. J'essazye de reprendre le code du tuto espace membre mais de le lier avec de l'AJAX entre mon fichier HTML et PHP.

Ce que je fais

Voici le code html et php qui repprennent le code du tuto mais avec l'ajout en fin de code des commandes AJAX.

Le code html

<!DOCTYPE html>
<html>
  <meta charset="utf-8" />
    <br><br>
    <h1>S'inscrire</h1>

    <div id="resultat">
    </div>

    <form action="" method="POST">

        <div class="form-group">
            <label for="">Pseudo</label>
            <input type="text" id="username" name="username" class="form-control"/>
        </div>

        <div class="form-group">
            <label for="">Email</label>
            <input type="text" id="email" name="email" class="form-control"/>
        </div>

        <div class="form-group">
            <label for="">Mot de passe</label>
            <input type="password" id="password" name="password" class="form-control"/>
        </div>

        <div class="form-group">
            <label for="">Confirmez votre mot de passe</label>
            <input type="password" id="password_confirm" name="password_confirm" class="form-control"/>
        </div>
        <br>

        <button type="submit" id="submit" class="btn btn-primary">M'inscrire</button>

    </form>

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <script>

        $(document).ready(function(){

        $("#submit").click(function(e){ e.preventDefault();
            $.post('register.php', {
                username : $("#username").val(),
                password : $("#password").val(),
                password_confirm : $("#password_confirm").val(),
                email : $("#email").val()

            },
            function (data) {

                    alert(data);
                    $("#resultat").html(data);
                },   

        'JSON'
        );
      });
    });

    </script>

</html>

Le code PHP

<?php 
   if(!empty($_POST)){

    $errors = array();
    require_once 'inc/db.php';

    if(empty($_POST['username']) || !preg_match('/^[a-zA-Z0-9_]+$/', $_POST['username'])){
       $errors['username'] = "Votre pseudo n'est pas valide (alphanumérique)";
    } else {
       $req = $pdo->prepare('SELECT id FROM users WHERE username = ?');
        $req->execute([$_POST['username']]);
        $user = $req->fetch();
        if($user){
           $errors['username'] = 'Ce pseudo est déjà pris';
        }
    }

    if(empty($_POST['email']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
       $errors['email'] = "Votre email n'est pas valide";
    } else {
       $req = $pdo->prepare('SELECT id FROM users WHERE email = ?');
        $req->execute([$_POST['email']]);
        $user = $req->fetch();
        if($user){
           $errors['email'] = 'Cet email est déjà utilisé pour un autre compte';
        }
    }

    if(empty($_POST['password']) || $_POST['password'] != $_POST['password_confirm']){
       $errors['password'] = "Vous devez rentrer un mot de passe valide";
    }

    if(empty($errors)){

    $req = $pdo->prepare("INSERT INTO users SET username = ?, password = ?, email = ?, confirmation_token = ?");
    $password = password_hash($_POST['password'], PASSWORD_BCRYPT);
    $token = str_random(60);
    $req->execute([$_POST['username'], $password, $_POST['email'], $token]);
    $user_id = $pdo->lastInsertId();
    mail($_POST['email'], 'Confirmation de votre compte', "Afin de valider votre compte merci de cliquer sur ce lien\n\nhttp://localhost/Type&GoSite/confirm?id=$user_id&token=$token");
    $_SESSION['flash']['success'] = 'Un email de confirmation vous a été envoyé pour valider votre compte';
    header('Location: login.php');
    exit();

    }

    }
    ?>
    <?php if(!empty($errors)): ?>
       <div class="flash2">
          <h3>Vous n'avez pas rempli le formulaire correctement</h3>
            <ul>
               <?php foreach($errors as $error): ?>
                  <li><?= $error; ?></li>
                <?php endforeach; ?>
            </ul>
        </div>
    <?php endif; ?>

   <?php if(!empty($errors)){
    header('Content-Type: application/json; Charset=utf-8');?>{
    "data":"<?echo json_encode($errors);?>"}
    <?php exit();}?>

Ce que je veux

J'aimerais donc que la variable $error s'affiche dans ma page html

Ce que j'obtiens

Mais rien ne se passe. Pouvez vous svp m'indiquer ce que je manque ? Merci beaucoup!!

3 réponses

Lartak
Réponse acceptée

Bonsoir.
Il te suffit de remplacer :

if (!empty($errors)) {
    header('Content-Type: application/json; Charset=utf-8');?>{
    "data":"<?echo json_encode($errors);?>"}
<?php exit();}?>

Par par exemple :

if (!empty($errors)) {
    header('Content-Type: application/json; Charset=utf-8');
    echo json_encode($errors);
    exit();
}
JeremieMeunier
Réponse acceptée

Bonjour,

Tu peut aussi envoyer tes données via FormData, tu fait un

var form = document.querySelector('form')

form.addEvenetListener('submit', function(e) {

    e.preventDefault()
    var myform = new ForData(this)
})

Bien sûr après la réponse que tu reçoit tu doit la parser avec JSON.parse()

ThomasduCanada
Auteur

Merci bcp pour cette réponse rapide. Celaa ne fonctionne malheureusement toujours pas. La console affiche "Une chaîne vide a été transmise à « getElementById() »."