Michael Heneghan Michael Heneghan - 7 months ago 29
HTML Question

Updating JSON file with PHP & AJAX

I'm making a game and to use it, you must register. So I'm trying to append a username and password that has been entered into a form to my JSON file which looks like:

{
"LogIns":[
{
"Username":"mikehene",
"password":"123"
},
{
"Username":"mike",
"password":"love"
}
]
}


My PHP reads:

<?php

$username = $_POST['username'];
$password = $_POST['password'];

$str = file_get_contents('logins.json'); // Save contents of file into a variable

$json = json_decode($str, true); // decode the data and set it to recieve data asynchronosly - store in $json
array_push($json, $username, $password);
$jsonData = json_encode($json);
file_put_contents('logins.json', json_encode($json));

?>


AJAX:

function callAJAX(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange=function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
console.log(xhttp.responseText);

document.getElementById("PHPid").innerHTML = xhttp.responseText;
}
}
xhttp.open("POST", "reg.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("username=" + usernamePassed + "&password="+ userPassword);
}


HTML:

<fieldset>
<legend>Please register before playing</legend>
<form>
Username: <br>
<input type="text" placeholder="Enter a Username" id="username1" name="username"><br>
Password: <br>
<input type="password" placeholder="Enter a password" id="password" name="password"><br>
<input type="submit" value="Submit" onclick="return checkLogin();">
</form>
</fieldset>
<div id="PHPid"><div>

<script>
var usernamePassed = '';
var userPassword = "";

function checkLogin(){
usernamePassed = document.getElementById("username1").value;
userPassword = document.getElementById("password").value;
console.log(usernamePassed);
console.log(userPassword);
callAJAX();
return false;

}
function callAJAX(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange=function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
console.log(xhttp.responseText);
document.getElementById("PHPid").innerHTML = xhttp.responseText;
}
}
xhttp.open("POST", "reg.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("username=" + usernamePassed + "&password="+ userPassword);

</script>


So for example if I inputted username: mike, password:123 into the HTML field it should update my json file but my json file is not changing.

I'm running it on localhost and I have checked the permissions, which are set to read and write for all users.

Any ideas why?

Thanks in advance

Answer

The problem here is that you are missing a closing brace } for your callAJAX() function.

Having looked at your developer console, you would have seen the following:

SyntaxError: missing } after function body

Fixed script code:

<script>
var usernamePassed = '';
var userPassword = "";

        function checkLogin(){
            usernamePassed = document.getElementById("username1").value;
            userPassword = document.getElementById("password").value;
            console.log(usernamePassed);
            console.log(userPassword);
            callAJAX();
            return false;

        }
        function callAJAX(){
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange=function() {
                if (xhttp.readyState == 4 && xhttp.status == 200) {
                   console.log(xhttp.responseText);
document.getElementById("PHPid").innerHTML = xhttp.responseText;
                }
            }
            xhttp.open("POST", "reg.php", true);
            xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhttp.send("username=" + usernamePassed + "&password="+ userPassword);

}

</script>

  • Using a code editor with bracket/brace matching, would have helped ;-)

What I tested this with was:

<fieldset>
        <legend>Please register before playing</legend>
        <form>
            Username: <br>
            <input type="text" placeholder="Enter a Username" id="username1" name="username"><br>
            Password: <br>
            <input type="password" placeholder="Enter a password" id="password" name="password"><br>
            <input type="submit" value="Submit" onclick="return checkLogin();">
        </form>
    </fieldset>
<div id="PHPid"><div>

<script>
var usernamePassed = '';
var userPassword = "";

        function checkLogin(){
            usernamePassed = document.getElementById("username1").value;
            userPassword = document.getElementById("password").value;
            console.log(usernamePassed);
            console.log(userPassword);
            callAJAX();
            return false;

        }
        function callAJAX(){
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange=function() {
                if (xhttp.readyState == 4 && xhttp.status == 200) {
                   console.log(xhttp.responseText);
document.getElementById("PHPid").innerHTML = xhttp.responseText;
                }
            }
            xhttp.open("POST", "reg.php", true);
            xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhttp.send("username=" + usernamePassed + "&password="+ userPassword);
}
</script>

and

<?php

    $username = $_POST['username'];
    $password = $_POST['password'];

    $str = file_get_contents('logins.json'); // Save contents of file into a variable

    $json = json_decode($str, true); // decode the data and set it to recieve data asynchronosly - store in $json
    array_push($json, $username, $password);
    $jsonData = json_encode($json);
    file_put_contents('logins.json', json_encode($json));

?>
Comments