how to read json file using ajax?

Question

Ok so I want to submit a login page without redirection. And after reading stuff about this, I tried AJAX. So I watched some tutorials about login page using ajax.

My reference is this video: https://www.youtube.com/watch?v=MkGUL7ZRCTA

What I want to do is that the user needs to login first. But I don't want the page to be redirected. Just check if the password matches the password in the json file. But when I try it, nothing is showing in the console log (I'm using firefox).

I want to do something like this: http://susheel61.0fees.net/ajaxtest.php but instead of showing the user input under it, it would show "Correct Password" or "Incorrect Password" (after checking the match)

Here are my code snippets: HTML

<!DOCTYPE html>
<html>
<head>
<title> AJAX Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
#loginbox{
    width: 240px;
    height: 140px;
    margin: 0px auto;
    margin-top: 300px;
}
</style>
</head>
<body>
<div id="loginbox">
    <input id="password" type="password" placeholder="Enter Password" />

    <button> Submit </button>

</div>
<div id="container"></div>

<script type="text/javascript">

    $("button").click(function (){

        var password = $("#password").val();

        $.post("server.php", {password:password}, function(data){
            console.log(data);
        });

    });
</script>
</body>
</html>

PHP

<?php

if (isset($_POST["password"])){
 $password = $_POST["password"];

 $jsondata = file_get_contents("CONFIG.json");
 $json = json_decode($jsondata, true);

 if ($password == $json["password"]) {
    echo "Welcome";
 } else {
    echo "Wrong Password";
}
}
?>

and my JSON

{"reset":"12312","sync":"232131","config":"2","bypass":"22","password":"qwerty"}

EDIT: I tried using windrunn3r's answer. Everything works fine. But then, I want it that if the password is correct, it would show the (hidden) form. Here is my new HTML.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> AJAX Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
#loginbox{
    width: 240px;
    height: 140px;
    margin: 0px auto;
    margin-top: 300px;
}
</style>
</head>
<body>

<div id="loginbox">
<div id="message"></div>
    <input id="password" type="password" placeholder="Current Password" />

    <button> Submit </button>
<div id="container"></div>
</div>

<div id="newpass" style="display: none">
    <input id="password" type="password" placeholder="New Password" />

    <button> Submit </button>
</div>

<script type="text/javascript">

$("button").click(function (){

var password = $("#password").val();


    $.ajax({
        url: 'server.php',
        cache: false,
        async: true,
        beforeSend: function () {
            $("#message").html("Checking...");

            console.log(password)
        },
        type: "POST",
        data: { password: password }, //data to post to server
        error: function (data) {
            $("#message").hide();
            $("#container").html("No password was sent");
        }, 
        success: function (data) {
            $("#message").hide();
            console.log(data)
            if (console.log(data)=="Welcome"){
                $("#newpass").show();
            } else {
                $("#container").html("Password Incorrect");
            }
        }
    });
});

    /*$("button").click(function (){

        var password = $("#password").val();

        $.post("server.php", {password:password}, function(data){
            console.log(data);

            if (console.log(data) == "Welcome") {
                document.getElementById("container").innerHTML = "Password Correct!";
            } else {
                document.getElementById("container").innerHTML = "Password Incorrect!";
            }
        });

    });*/
</script>

Possible duplicate of [how to parse json data with jquery / javascript?](http://stackoverflow.com/questions/8951810/how-to-parse-json-data-with-jquery-javascript) — aldrin27, Apr 26 '16 at 03:46
I dont know if its a duplicate but I was able to show something on the console when I added and on my HTML file — gooey, Apr 26 '16 at 03:50

score 1 · Accepted Answer · answered Apr 26 '16 at 04:00

It is possible that you are using the wrong Jquery function for this. Jquery.post() (https://api.jquery.com/jquery.post/) only has options for adding a function for a successful execution of the request and the data here refers to the data returned by the server. If you want to do something before you send it to the server you may want to use $.ajax() to get more options.

$("#submitButton").click(function (){

    var password = $("#password").val();


        $.ajax({
            url: 'server.php',
            cache: false,
            async: true,
            beforeSend: function () {
                //do what you want to do before sending the data to the server

                console.log(password)
            },
            type: "POST",
            data: { password: password }, //data to post to server
            error: function (data) {
                //do something if an error happends
            }, 
            success: function (data) {
                //do something with server's response
                console.log(data)
            }
        });
});

Working fiddle: https://jsfiddle.net/windrunn3r1990/Lh46005f/1/

Thank you very much. I appreciate your help. I just want to ask another question regarding my first question. See edited portion above. — gooey, Apr 26 '16 at 04:51
Here is a screenshot of what I had: http://imgur.com/CT7T6gp Although it shows welcome, it still shows "Password Incorrect" and the hidden form is not shown. How can I fix this? — gooey, Apr 26 '16 at 04:56
In the success function, try using `data=="Welcome"` instead of `console.log(data)=="Welcome"` for the `if` condition — windrunn3r.1990, Apr 26 '16 at 05:06

how to read json file using ajax?

1 Answers1