Login avec ajax,JS et php
Bonjour tout le monde,
J'essaie de faire la partie login de mon site web dans une pop up. J'ai donc mon formulaire dans une pop up dans mon index.php qui s'ouvre grâce à un bouton
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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
| <html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="oXHR.js"></script>
<script>
//////////////////////////////////////////////////////////////////LOGIN///////////////////////////////////////////////////////////////////
<?php
include('/php/login.php');
?>
function loginBT(){
$DOM = document.getElementById("popup");
$DOM.style.display = "block";
$DOM.style.background = "white";
$DOM.innerHTML = "<div id='popup_login'><img src='img/index/cross.png' id='close' onclick ='hidelogin()' /><h2 id='login_title' style='margin-top:3%;'>Login</h2><div id='button_choice'><input type='button' id='login_choicesi' class='login_choicesi' value='Sign in' onclick='addClassSI()'/><input type='button' id='login_choicer' class='login_choicer' value='Register' onclick='addClassR()'/></div><form action='' method='post' id='form_signin' style='display:none;'><input type='text' name='login' id='login_fieldSI' placeholder='Name'/><input type='password' name='pwd' id='password_fieldSI' placeholder='Password'/><input type='button' class='login_submit' value='Send' onclick='request(readData)'/></form><form action='' method='post' id='form_register' style='display:none;'><input type='text' name='login' id='login_fieldR' placeholder='Name'/><input type='password' name='pwd' id='login_fieldR' placeholder='Password'/><input type='button' class='login_submit' value='Send' onclick='check_emptyR()'/></form></div> ";
}
//button sign in
function addClassSI(){
var x = document.getElementById("login_choicesi");
var y = document.getElementById("login_choicer");
if (y.classList.contains("active_choicer")){
y.classList.remove("active_choicer");
y.classList.add("login_choicer");
document.getElementById("form_register").style.display="none";
}
x.classList.remove("login_choicesi");
x.classList.add("active_choicesi");
document.getElementById("form_signin").style.display="inline";
}
//Button register
function addClassR(){
var x = document.getElementById("login_choicer");
var y = document.getElementById("login_choicesi");
if (y.classList.contains("active_choicesi")){
y.classList.remove("active_choicesi");
y.classList.add("login_choicesi");
document.getElementById("form_signin").style.display="none";
}
x.classList.remove("login_choicer");
x.classList.add("active_choicer");
document.getElementById("form_register").style.display="inline";
}
function request(callback) {
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
callback(xhr.readData);
}
};
var login_fieldSI = encodeURIComponent(document.getElementById("login_fieldSI").value);
var password_fieldSI = encodeURIComponent(document.getElementById("password_fieldSI").value);
xhr.open("POST", "login.php?Login_fieldSI=" + login_fieldSI + "&=Password_fieldSI" + password_fieldSI, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(null);
}
function readData(xhr) {
alert(xhr);
}
function hidelogin(){
document.getElementById('popup').style.display = "none";
}
function check_emptySI(){
if(document.getElementById('login_fieldSI').value === "" ){
alert ("Fill All Fields !");
}
else {
document.getElementById('form_signin').submit();
alert ("Form submitted successfully");
}
}
function check_emptyR(){
if(document.getElementById('login_fieldR').value === "" ){
alert ("Fill All Fields !");
}
else {
document.getElementById('form_register').submit();
alert ("Form submitted successfully");
}
}
</script>
</head>
<body>
<div id="container">
<div id="top">
<div id="contact">
<div id="btns">
<input type="button" class="btn_login" value="" onclick="loginBT();" style="background:url(img/home/contact/login_icon.jpg) no-repeat;" />
</div>
</div>
</div>
<div id="popup"><span id="popup_close" onclick="hide('popup')" >X</span><div></div></div>
</div>
</body>
</html> |
J'essaie d'utiliser des requêtes AJAX car je ne veux pas être redirigée sur une autre page après avoir submit mon formulaire et car j'ai besoin d'accéder à ma bdd SQL
J'ai donc cela pour les requêtes AJAX, oXHR.js
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| function getXMLHttpRequest() {
var xhr = null;
if (window.XMLHttpRequest || window.ActiveXObject) {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
} else {
xhr = new XMLHttpRequest();
}
} else {
alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
return null;
}
return xhr;
} |
et enfin pour l'instant ce n'est que des tests mais j'ai ça pour le PHP, login.php
Code:
1 2 3 4 5 6 7 8 9 10
| <?php
header("Content-Type: text/plain");
$login_fieldSI = (isset($_POST["Login_fieldSI"])) ? $_POST["Login_fieldSI"] : NULL;
$password_fieldSI = (isset($_POST["Password_fieldSI"])) ? $_POST["Password_fieldSI"] : NULL;
if ($login_fieldSI && $password_fieldSI) {
echo "login : " . $login_fieldSI;
} else {
echo 'FAIL';
}
?> |
J'ai plusieurs erreurs :
- Je n'arrive pas à afficher le résultat de mon PHP après lancement de ma requête AJAX erreur : Warning: Cannot modify header information - headers already sent in C:\www\www.URL.com\php\login.php on line 2
- Problème d'insertion de mon PHP dans mon JS je pense j'ai des balises dans mon code JS quand je clique sur mon bouton pour me essayer de me connecter
Pouvez-vous m'aider à y voir plus clair ?
Agathe