PHP, javascript AJAX

Question

I have the following code for a login-page:

function LoginToSite() {
    if (getElementById('username').value != "" && getElementById('password').value != "") {
        request.addEventListener('readystatechange', Login, false);

        var username = encodeURIComponent(document.getElementById("username").value);
        var password = encodeURIComponent(document.getElementById("password").value);


        request.open('GET', 'login.php?username='+username+"&password="+password, true);
        request.send(null);
    }
}

function Login() {
    if (request.readyState === 4 && request.status === 200) {
        alert("READY");
        var myResponse = JSON.parse(this.responseText);
        getElementById("count").innerHTML = myResponse;
        getElementById('login').style.display = "none";
        if(request.responseText == 1){
            alert("Login is successfull");
        }
        else if(request.responseText == 0){
            alert("Invalid Username or Password");
        }
    }
    else{
        alert("Error :Something went wrong");
    }
    request.send();
}

php-code

session_start();

$logins = array("username1" => "password1", "username2" => "password2" );

$username = $_REQUEST['username'];
$password = $_REQUEST['password'];
if($username != '' and $password != ''){

    foreach($logins as $key=>$value){
        if(($key == $username) && ($value == $password)){
            echo "1";
        }else{
            echo "0";
        }
    }

}else{
    echo "0";
}

When im trying to login, the site first alert that something went wrong, then the same thing happens again and after that, it alerts "ready". What do I have to change to get this right?

Sorry, $logins is an array that holds the usernames and passwords. — Isla
– Isla, Commented Feb 16, 2017 at 20:04
Where is request defined in your JavaScript? Also where does LoginToSite() get called? — daniel0mullins
– daniel0mullins, Commented Feb 16, 2017 at 21:33
Never store plain text passwords! Please use PHP's built-in functions to handle password security. If you're using a PHP version less than 5.5 you can use the password_hash() compatibility pack. Make sure you don't escape passwords or use any other cleansing mechanism on them before hashing. Doing so changes the password and causes unnecessary additional coding. — Jay Blanchard
– Jay Blanchard, Commented Feb 16, 2017 at 21:36

user5734311 · Accepted Answer · 2017-02-16 20:09:55Z

0

You're comparing readyState to 4 and status to 200. In all other cases when Login() is called, which happens multiple times while the request is running, your code alerts "Error :Something went wrong". Not sure if the messy indentation is the problem here.
There's also a stray request.send() at the end.

Use this:

function Login() {
  if (request.readyState < 4) return; // do nothing
  if (request.status === 200) {
    alert("READY");
    var myResponse = request.responseText;
    getElementById("count").innerHTML = myResponse;
    if (myResponse == 1) {
      alert("Login is successfull");
      getElementById('login').style.display = "none";
    } else if (myResponse == 0) {
      alert("Invalid Username or Password");
    }
  } else {
    alert("Error: Something went wrong");
  }
}

answered Feb 16, 2017 at 20:09

user5734311

Sign up to request clarification or add additional context in comments.

3 Comments

Isla Over a year ago

Thanks for your help! This changed the output, but now nothing happens at all. Maybe I need something more?

Isla Over a year ago

No, how do I do that? :)

user5734311 Over a year ago

Firefox: Ctrl-Shift-J, Chrome: F12

Jaromanda X · Accepted Answer · 2017-02-16 20:13:45Z

0

readystatechange event is called multiple times ... while the ready state changes from 0 -> 1 -> 2 -> 3 -> 4 ... all requests go through these changes ... your logic would alert an error when readystate becomes 1, then 2, then 3 ... only when readystate becomes 4 AND state is 200 will the "if" condition run

you're alsoe calling request.send every time you go in to "Login"

so a simple change

function Login() {
    if (request.readyState === 4) {
        if (request.status === 200) {
            alert("READY");
            var myResponse = JSON.parse(this.responseText);
            getElementById("count").innerHTML = myResponse;
            getElementById('login').style.display = "none";
            if(request.responseText == "1"){
                alert("Login is successfull");
            }
            else if(request.responseText == "0"){
                alert("Invalid Username or Password");
            }
        }
        else{
            alert("Error :Something went wrong");
        }
    }
}

Note: checking request.responseText == "1" because the response will be a string not a number

a better (in my opinion) solution is to NOT listen on readystate change, but listen for load event

request.addEventListener('load', Login, false);

then your Login code is

function Login() {
    if (request.status === 200) {
        alert("READY");
        var myResponse = JSON.parse(this.responseText);
        getElementById("count").innerHTML = myResponse;
        getElementById('login').style.display = "none";
        if(request.responseText == "1"){
            alert("Login is successfull");
        }
        else if(request.responseText == "0"){
            alert("Invalid Username or Password");
        }
    }
    else{
        alert("Error :Something went wrong");
    }
}

edited Feb 16, 2017 at 20:13

answered Feb 16, 2017 at 20:08

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

6 Comments

Isla Over a year ago

Thanks for your help, but I still have the same problem. Or okay, now I only get "something went wrong" one time, but still just that and "ready". Something more must be wrong. :(

Jaromanda X Over a year ago

Check what the status is. Use console.log ... alert screws asynchronous debugging

Isla Over a year ago

Thanks, that really helped! This is the error I have right now, on this line var myResponse = JSON.parse(this.responseText);: "SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data" I have no idea what that mean. :(

Jaromanda X Over a year ago

Ahh. You're not sending json from server. Only 0 or 1

Isla Over a year ago

Sorry, but I dont understand how to change the code so im sending json from server. Can you please help me?

|

Collectives™ on Stack Overflow

PHP, javascript AJAX

2 Answers 2

3 Comments

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Linked

Related