Login avec ajax,JS et php

Invité · 13/06/2017, 15h33

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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