Requête ajax sur Login

Par ADN, il y a 9 ans

Javascript

Bonjour à tous.

Je lance une requête Ajax pour enregistrer un nouvel utilisateur dans ma bdd. Mais je pense que je dois faire une erreur au niveau de ma requête.

Mon Form de mon register:

<form id="register-form" style="display:none;"> <div class="modal-body"> <div id="div-register-msg"> <div id="icon-register-msg" class="glyphicon glyphicon-chevron-right"></div> <span id="text-register-msg">Register an account.</span> </div> <input id="username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required> <input id="email" class="form-control" type="text" placeholder="E-Mail" required> <input id="password" class="form-control" type="password" placeholder="Password" required> <input id="passwordConfirm" class="form-control" type="password" placeholder="ConfirmPassword" required> </div> <div class="modal-footer"> <div> <button type="submit" class="btn btn-primary btn-lg btn-block">Register</button> </div> <div> <button id="register_login_btn" type="button" class="btn btn-link">Log In</button> <button id="register_lost_btn" type="button" class="btn btn-link">Lost Password?</button> </div> </div> </form>

Ma requête ajax:

$('#register-form').on ("submit",function(){ var username = $("#username").val(); alert(username) var email = $("#email").val(); alert(email) var password = $("#password").val(); alert(password) var passwordConfirm = $("#passwordConfirm").val(); alert(passwordConfirm) $.ajax({ url: 'index_new.php', data: 'username='+username+'&email='+email+'&password='+password+'&passwordConfirm='+passwordConfirm, type: 'POST', success: function(response){ if(response.status != 'success') revertFunc() }, error: function(e){ revertFunc(); alert('Error processing your request: '+e.responseText); } }); alert('OK') });

Et mon php:

if(isset($_POST['submit'])){ //very basic validation if(strlen($_POST['username']) < 3){ $error[] = 'Username is too short.'; } else { $stmt = $db->prepare('SELECT username FROM members WHERE username = :username'); $stmt->execute(array(':username' => $_POST['username'])); $row = $stmt->fetch(PDO::FETCH_ASSOC); if(!empty($row['username'])){ $error[] = 'Username provided is already in use.'; } } if(strlen($_POST['password']) < 3){ $error[] = 'Password is too short.'; } if(strlen($_POST['passwordConfirm']) < 3){ $error[] = 'Confirm password is too short.'; } if($_POST['password'] != $_POST['passwordConfirm']){ $error[] = 'Passwords do not match.'; } //email validation if(!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){ $error[] = 'Please enter a valid email address'; } else { $stmt = $db->prepare('SELECT email FROM members WHERE email = :email'); $stmt->execute(array(':email' => $_POST['email'])); $row = $stmt->fetch(PDO::FETCH_ASSOC); if(!empty($row['email'])){ $error[] = 'Email provided is already in use.'; } } //if no errors have been created carry on if(!isset($error)){ //hash the password $hashedpassword = $user->password_hash($_POST['password'], PASSWORD_BCRYPT); //create the activasion code $activasion = md5(uniqid(rand(),true)); try { //insert into database with a prepared statement $stmt = $db->prepare('INSERT INTO members (username,password,email,active) VALUES (:username, :password, :email, :active)'); $stmt->execute(array( ':username' => $_POST['username'], ':password' => $hashedpassword, ':email' => $_POST['email'], ':active' => $activasion )); $id = $db->lastInsertId('memberID');

Mon php fonctionne si je met mon formulaire a l'interrieur et que je m'inscrit.

Donc je pense que mon erreur vient de ma requête ajax. J'ai encore du mal a bien maitriser cette requête.

Merci pour votre aide.

7 réponses

betaWeb, il y a 9 ans

Salut,

C'est normal, tu dois passer les data sous forme d'objet JSON et non de chaîne de caractères.

var data = { username: username, email: email, password: password, passwordConfirm: passwordConfirm }; $.ajax({ url: 'index_new.php', data: data, dataType: 'JSON', type: 'POST', success: function(response){ if(response.status != 'success') revertFunc() }, error: function(e){ revertFunc(); alert('Error processing your request: '+e.responseText); } });
ADN, il y a 9 ans

Merci beaucoup pour vos répondes.
J'ai apporté quelques modifications mon formulaire

<form id="register-form" role="form" method="post" action="" style="display:none;"> <div class="modal-body"> <div id="div-register-msg"> <div id="icon-register-msg" class="glyphicon glyphicon-chevron-right"></div> <span id="text-register-msg">Register an account.</span> </div> <input id="username" name="username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required> <input id="email" name="email" class="form-control" type="text" placeholder="E-Mail" required> <input id="password" name="password" class="form-control" type="password" placeholder="Password" required> <input id="passwordConfirm" name="passwordConfirm" class="form-control" type="password" placeholder="ConfirmPassword" required> </div> <div class="modal-footer"> <div> <button type="submit" name="submit" class="btn btn-primary btn-lg btn-block">Register</button> </div> <div> <button id="register_login_btn" type="button" class="btn btn-link">Log In</button> <button id="register_lost_btn" type="button" class="btn btn-link">Lost Password?</button> </div> </div> </form>

En rajoutant:
form: method="post"
des name="" dans mes inputs
et une name"submit" a mon bouton.

Tout fonctionne si je met mon formulaire dans mon php mais lorsque je le remet dans mon html et que je fait ma requete ajax vers mon php rien ne ce passe.

BetaWeb: J'ai essayé ton code mais il ne marche pas non plus.
Mich'Kael: je ne peux pas regarder la video tout de suite je suis en stage dans une entreprise mais je la regarderais ce soir.

Quelqu'un aurait une autre idée?

betaWeb, il y a 9 ans

Je pense que tu devrais essayer de comprendre ce que tu fais au lieu de copier/coller du code ;)

Jack Bolos, il y a 9 ans

Bonjour ,
Bon J'ai pas tous compris mais je rois qu'il manque un truc dans ton code Javascript
Si je me trompe pas tu ecoute l'evenement SUBMIT de ton form parceque tu veut envoyer les données de ton form avec une requete ajax

la si je dit pas de betise se que tu fais c'est :

1- ecouter l'event SUBMIT

2- envoyer une requete AJAX

3-envoyer ton formulaire

Donc normalement tu doit annuler l'envoie de ton formulaire avec un : e.preventDefault(); return false;

Example Simple : https://jsfiddle.net/3d7ngtst/

Lorsque t'est sur que coté Javascript sa marche comme tu veut c'est a dir que le form est envoyer par requete ajax et pas directement
alors la si il reste des probleme il y'a de grande chance que ce soit du coté serveur donc php et compagnie

Kiv, il y a 9 ans

Salut,
A mon avis avec toute les réponses marquées par les autres membres ton code devrait être nickel.
Ceci dit, j'ai vu aucun PreventDefautl() dans ton évènement JS, sans ça ton formulaire chargera la page et ton ajax sera pas interprété comme il faut.
De plus que de prendre tes valeurs une à une, tu peux sérializer ton formulaire depuis l'ajax.
Autre chose, fait un retour en JSON depuis PHP car ton ajax attend une réponse depuis ton callback pour d'autre manipulation de ta page.

ADN, il y a 9 ans

J'ai regardé la video en entier que Mich'kael à envoyé et finalement en utilisant simplement:

$.post($form.attr('action'), {})

et en rajoutant à mon form : action="index_new.php"

Au lieu de (Que je n'arrivais pas à faire marché):

$.ajax({ url: 'index_new.php', data: data, dataType: 'JSON', type: 'POST', success: function(response){ if(response.status != 'success') revertFunc() }, error: function(e){ revertFunc(); alert('Error processing your request: '+e.responseText); } });

Et bien maintenant ça marche! Merci à tous pour votre aide :D