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? — aldrin27
– aldrin27, Commented Apr 26, 2016 at 3:46
I dont know if its a duplicate but I was able to show something on the console when I added <html lang="en"> and <meta charset = "utf-8"> on my HTML file — gooey
– gooey, Commented Apr 26, 2016 at 3:50

windrunn3r.1990 · Accepted Answer · 2016-04-26 04:00:52Z

1

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/

answered Apr 26, 2016 at 4:00

windrunn3r.1990

4142 silver badges6 bronze badges

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

3 Comments

gooey Over a year ago

Thank you very much. I appreciate your help. I just want to ask another question regarding my first question. See edited portion above.

gooey Over a year ago

Here is a screenshot of what I had: imgur.com/CT7T6gp Although it shows welcome, it still shows "Password Incorrect" and the hidden form is not shown. How can I fix this?

windrunn3r.1990 Over a year ago

In the success function, try using data=="Welcome" instead of console.log(data)=="Welcome" for the if condition

Collectives™ on Stack Overflow

how to read json file using ajax?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related