使用PHP和AJAX更新JSON文件

debugcn 发表于 Dev

迈克尔·黑内汉（Michael Heneghan）

我正在制作游戏，要使用它，您必须注册。因此，我尝试将已输入表单的用户名和密码附加到我的JSON文件中，如下所示：

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

我的PHP读取：

<?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>

因此，例如，如果我在HTML字段中输入了用户名：mike，密码：123，它应该会更新我的json文件，但我的json文件不会更改。

我在localhost上运行它，并检查了权限，所有用户都将其设置为读写。

有什么想法吗？

提前致谢

放克四十尼纳

这里的问题是，你缺少一个右括号}为您的callAJAX()功能。

查看开发人员控制台后，您将看到以下内容：

SyntaxError：函数主体后缺少}

固定脚本代码：

<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>

~~-使用带有括号/括号匹配的代码编辑器会有所帮助;-)~~

您已经在使用注释中指出的一种。

我测试的是：

<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>

和

<?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));

?>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。