11486 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'aimerai savoir ça sert a quoi cette ligne SVP ?

data: "username="+$("#username").val()+"&password="+$("#password").val(), // données à transmettre


code complet :

		$(document).ready( function () { 
			$("#connexionForm").submit( function() {	// à la soumission du formulaire						 
				$.ajax({ // fonction permettant de faire de l'ajax
					type: "GET", // methode de transmission des données au fichier php
					url: "membre/verification.php", // url du fichier php
					data: "username="+$("#username").val()+"&password="+$("#password").val(), // données à transmettre
					success: function(msg){ // si l'appel a bien fonctionné
						if(msg==1) // si la connexion en php a fonctionnée
						{
							window.location.assign("membre/profile.php");
						}
						else // si la connexion en php n'a pas fonctionnée
						{
							$("p#errorLbl").html("Ce nom d'utilisateur ou ce mot de passe est incorrect. <a href=\"recuperation/index.php\" style=\"text-decoration: none; color: #DE5711;\"></br>Vous les avez perdus ?<br><br></a>");
							// on affiche un message d'erreur dans le span prévu à cet effet
						}
				   }
				});
				return false; // permet de rester sur la même page à la soumission du formulaire
			});
		});


Formulaire :

<form id="connexionForm" class="center" method="post" action="membre/verification.php">
						<fieldset>
							<input class="auto" type="text" name="userlogin" required="required" placeholder="Login" style="color: rgb(76, 76, 76)"></input>
						</fieldset>
						<fieldset>
							<input class="auto" type="password" name="userpassword" required="required" placeholder="Password" style="color: rgb(76, 76, 76)"></input>
						</fieldset>
						<p id="errorLbl" style="color: #BC0000; text-align: center"></p>
						<input type="submit" name="submit" value="Connexion" style="margin-bottom: 0; margin-top: 5; width: 150px"></input>
					</form>
Hello,

La ligne que tu nous présente te permet de faire passer des paramètres à ta page PHP.

Ici, on est en présence d'une requête de type "GET". Tu pourras donc récupérer tes données transmises sous la forme suivante dasn ta page PHP:


echo $_GET["username"];
echo $_GET["password"];


Si tu est observateur, tu remarqueras que le data ressemble aux paramètres que tu passe via l'URL
http://www.mapage.php?username=yokii&password=jesperequecestenmd5


Tu peux donc rajouter des paramètres dans ta requête AJAX, de la même manière que tu l'aurais fait via ton URL Smiley cligne

EDIT: cela étant dit, je me demande bien pourquoi tu utilises l'AJAX dans cette situation. C'est un formulaire de connexion tout bête, un simple submit aurait laaaargement suffit et t'aurais éviter bien des tracs. Du style, si je désactive Javascript, comment va se comporter le PHP qui traite la connexion? Puisque la requête AJAX ne sera pas executée?

Bref, je te conseil de faire plus simple, et de simplement mettre un bouton submit.

Bye,
Yokii
Modifié par Yokii (22 Jul 2014 - 19:52)
Salut, merci pour ta réponse et ton explication.

Enfaîte le but de ce script c'est d'afficher un message d'erreur si le login ou mot de passe sont incorrecte, le code fonctionné correctement jusqu'au moment je change de design.

Mon problème que j'arrive pas a me connecté même si je rentre les données correcte.

Ps: je suis nul en JS Smiley lol

page vérification :

<?php
	session_start();
	header("Content-Type: text/plain");
	$ulogin = (isset($_GET["userlogin"])) ? $_GET["userlogin"] : NULL;
	$upassword = (isset($_GET["userpassword"])) ? $_GET["userpassword"] : NULL;
	if($ulogin && $upassword)
	{ 
		// Connexion de la base de donnée
		include("../includes/connbd.php");
		// Je vérifie le pseudo et le mot de passe
		$req = $bdd->prepare("SELECT COUNT(*) AS membre_valide FROM profile WHERE userpassword = '$upassword' AND userlogin = '$ulogin'");// Je compte le nombre d'entrée ayant pour mot de passe et login ceux rentrés
		$req->execute();
		$data = $req->fetch();
		$req->closeCursor();
		if($data['membre_valide'] != 0) 
		{ 
			echo "1";
			$_SESSION['login'] = $ulogin;
		}
		else 
		{ 
			echo "0";
		}
	}
?>


page connexion.php

<?php
session_start();
?>
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="UTF-8" />
	<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  -->
	<title>Espace d'authentification administrateur</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script>
		$(document).ready( function () { 
			$("#connexionForm").submit( function() {	// à la soumission du formulaire						 
				$.ajax({ // fonction permettant de faire de l'ajax
					type: "GET", // methode de transmission des données au fichier php
					url: "membre/verification.php", // url du fichier php
					data: "userlogin="+$("#userlogin").val()+"&password="+$("#password").val(), // données à transmettre
					success: function(msg){ // si l'appel a bien fonctionné
						if(msg==1) // si la connexion en php a fonctionnée
						{
							window.location.assign("membre/profile.php");
						}
						else // si la connexion en php n'a pas fonctionnée
						{
							$("p#errorLbl").html("Ce nom d'utilisateur ou ce mot de passe est incorrect. <a href=\"recuperation/index.php\" style=\"text-decoration: none; color: #DE5711;\"></br>Vous les avez perdus ?<br><br></a>");
							// on affiche un message d'erreur dans le span prévu à cet effet
						}
				   }
				});
				return false; // permet de rester sur la même page à la soumission du formulaire
			});
		});
	</script>
</head>
<body>
    <div id="wrapper">
		<div class="header">
			<?php include("includes/nav1.php"); ?>
		</div>
		<div class="section">
			<div class="head">
				<br></br>
				<h1>Espace d'authentification administrateur</h1>
				<br>
				<h2>Entrer votre identifiant et votre mot de passe :</h2>
				<br></br>
			</div>
			<div id="loginform">
				<div style="padding-top: 20px;">
					<form id="connexionForm" class="center" method="post" action="membre/verification.php">
						<fieldset>
							<input class="auto" type="text" name="userlogin" required="required" placeholder="Login" style="color: rgb(76, 76, 76)"></input>
						</fieldset>
						<fieldset>
							<input class="auto" type="password" name="userpassword" required="required" placeholder="Password" style="color: rgb(76, 76, 76)"></input>
						</fieldset>
						<p id="errorLbl" style="color: #BC0000; text-align: center"></p>
						<input type="submit" name="submit" value="Connexion" style="margin-bottom: 0; margin-top: 5; width: 150px"></input>
					</form>
				</div>
			</div>
		</div>
    </div>
</body>
</html>


Merci de mettre des commentaires plus claire SVP Smiley lol
Modifié par hilalovish (22 Jul 2014 - 21:19)
Bonjour, merci pour votre réponse, et je suis désoler pour ce retard.

La méthode que tu ma montré n'est pas complète, j'ai trouvé une autre méthode, plus simple.
Pour les gens intéresser. J'ai utiliser les SESSIONS pour afficher les messages d'erreur.

Page verification.php :

<?php
	session_start();
	if(isset($_POST['submit']))
	{
		$login = htmlspecialchars($_POST['userlogin']);
		$password = htmlspecialchars(md5($_POST['userpassword']));

		// Connexion de la base de donnée
		include("../includes/connbd.php");
			
		// Je vérifie le login et le mot de passe
		$req = $bdd->prepare("SELECT COUNT(*) AS membre_valide FROM profile WHERE userpassword = '$password' AND userlogin = '$login'"); 
		$req->execute();
		$data = $req->fetch();
		$req->closeCursor(); // Termine le traitement de la requête
			
		// Je teste la valeur de $data['membre_valide']
		if($data['membre_valide'] != 0) 
		{ 
			// On as trouvé un membre avec ce couple mot de passe et login
			$_SESSION['login'] = $login;
			header('Location:motpasse.php');
		}
		else 
		{ 
			// Personne n'existe dans la table avec ce couple mot de passe et login
			$_SESSION['flash'] = 'Login ou mot de passe incorrect'; 
			header('Location:../admin.php');
		}
	}
?>


Page admin.php :


<form class="center" method="post" action="membre\verification.php">
	<fieldset>
		<input class="auto" type="text" name="userlogin" required="required" placeholder="Identifiant" style="color: rgb(76, 76, 76)"></input>
	</fieldset>
	<fieldset>
		<input class="auto" type="password" name="userpassword" required="required" placeholder="Password" style="color: rgb(76, 76, 76)"></input>
	</fieldset>
	<!-- Ce nom d'utilisateur ou ce mot de passe est incorrect -->
	<?php 
		if(isset($_SESSION['flash']))
		{
	?>
			<p class="error">
				Ce nom d'utilisateur ou ce mot de passe est incorrect. 
				<a style="text-decoration: none; color: #DE5711" href="recuperation/index.php">
					</br>Vous les avez perdus ?<br><br>
				</a>
			</p>
	<?php	
			unset($_SESSION['flash']);
		}	
	?>	
	<!-- Mot de passe modifié -->
	<?php 
		if(!empty($_GET['msg']))
		{
			$_SESSION['message'] = $_GET['msg']; 
							
			if(isset($_SESSION['message']))
			{
	?>
				<p class="success">
					<?php echo $_SESSION['message']; ?><br><br>
				</p>
	<?php	
			unset($_SESSION['flash']);
			}	
		}
	?>	
	<input type="submit" name="submit" value="Connexion" style="margin-bottom: 0; margin-top: 5; width: 150px"></input>
</form>

Modifié par hilalovish (05 Aug 2014 - 07:03)