How can I compare my AJAX response?

Question

I'm having a HTML page where you can enter a password to be redirected to an intern page called "Files.php". If the entered password is wrong, I give a feedback in my form, if it is correct, I want to redirect to the intern page.

My HTML looks like this:

<form name="download" id="download">
                        <label for="password">Passwort</label><br>
                        <div id="wrongpassword"></div>
                        <input type="password" id="password" name="password" required> <br>
                        <input type="submit" id="submit" value="Download">
</form>

My AJAX request like this:

$(document).ready(function () {

        var request;

        $("#download").submit(function(event){


            event.preventDefault();

            var $form = $(this);

            var $inputs = $form.find("input, select, button, textarea");

            var serializedData = $form.serialize();

            $inputs.prop("disabled", true);

            request= $.ajax({
                url: "download.php",
                type: "post",
                data: serializedData
            });


    request.done(function (response, textStatus, jqXHR){
        // Log a message to the console
        if(response=="Success"){
            window.location.replace("Files.php");
        }else{
            $("#wrongpassword").html(response);
        } });});

And my PHP like this:

<?php


session_start();
$db = new PDO('mysql:host=localhost;dbname=nachhilfe', 'root', 'secret');



/*if(!$db)
{
exit("Verbindungsfehler: ".mysqli_connect_error());
}
else{
    echo "Success!";
}*/

$pw = ($_POST['password']);

$statement = $db->prepare("SELECT passwort FROM downloads WHERE id= :id");
$result = $statement->execute(array(':id' => 4));
$stored = $statement->fetch();

if(password_verify($pw, $stored['passwort'])){
    $_SESSION['verified'] = true;
    echo "Success";
}
else{
    echo "Wrong password";
}?>

So far, everything is working, except from the response compare if(response=="Success"), which is always false.

How can i compare my AJAX response or is there a nicer way to achieve the redirect?

Answer 1

Based on the comments, I would maybe try using a json string:

$("#download").submit(function(event){
    event.preventDefault();
    var $form = $(this);
    var $inputs = $form.find("input, select, button, textarea");
    var serializedData = $form.serialize();
    $inputs.prop("disabled", true);
    $.ajax({
        url: "download.php",
        type: "post",
        data: serializedData,
        dataType: 'json',
        success: function(response) {
            if(response.success === true){
                window.location.replace("Files.php");
            }
            else {
                $("#wrongpassword").html(response.msg);
            }
        }
    });
});

Then in the php:

<?php
session_start();
$db        = new PDO('mysql:host=localhost;dbname=nachhilfe', 'root', 'secret');
$pw        = $_POST['password'];
$statement = $db->prepare("SELECT passwort FROM downloads WHERE id= :id");
$result    = $statement->execute(array(':id' => 4));
$stored    = $statement->fetch();

if(password_verify($pw, $stored['passwort'])){
    $_SESSION['verified'] = true;
}
# Create a response array
# Note, I am using new syntax for array, you can use array('success'=>false,'msg'=>'Bad Password') if using an unsupported version
$response = (!empty($_SESSION['verified']))? ['success'=>true,'msg'=>'Success'] : ['success'=>false,'msg'=>'Bad Password'];
# Send back the json string to ajax
# Die so you don't get any empty space afterwards by accident
die(json_encode($response));

Also at the end of the document, if it ends in php, you don't have to close using ?>. You only need to close it if the script will break to html content such as:

?> <div>Stuff</div>

Here is an explanation of the benefits of this: PHP end tag "?>"

---

EDIT:

Since you can get {"success":true,"msg":"Success"} when commenting the dataType: 'json' line, try this version for the ajax:

    $.ajax({
        url: "download.php",
        type: "post",
        data: serializedData,
        success: function(response) {
            // Parse here
            var json = JSON.parse(response);
            // You should get an object now
            alert(json.msg);
            // Now you should be able get the boolean here
            if(json.success === true){
                // Try redirecting this way here
                window.location = "Files.php";
            }
            else {
                $("#wrongpassword").html(json.msg);
            }
        },
        error: function(response) {
            alert(response);
        }
    });