通过 AJAX 或 PHP 将 JavaScript 数据写入 JSON 文件答案

【问题标题】：Writing JavaScript Data To JSON File via AJAX or PHP通过 AJAX 或 PHP 将 JavaScript 数据写入 JSON 文件
【发布时间】：2017-11-20 22:27:00
【问题描述】：

我有以下代码在表格中显示有关人员的信息，当单击标记为“学习”的按钮时，该信息将存储在键/值类型数组中，然后将其拼接到指定的 JSON 对象中。

所有这些都可以正常工作，但我想更改保存 JSON 对象本身的文件，这意味着我需要处理服务器端代码。如何将此插入到我的 JSON 对象中并实际更改它存储的文本文件（这样如果我打开它，新信息就会在那里）？

我的代码如下-->

index.html

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="list.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title></title>
</head>
<body>
    <table>
        <tr>
            <td>
                <table>
                    <tr><td>Name</td><td class="name">Jenkins</td></tr>
                    <tr><td>Job</td><td class="job">Accountant</td></tr>
                    <tr><td>Size</td><td class="size">Small</td></tr>
                </table>
            </td>
            <td class="description">average joe.</td>
            <td>
                <button class="learn">Learn</button>
            </td>
        </tr>
    </table>


    <script type="text/javascript">
        $(".learn").click(function(){

        // look at jsonData in list.js and append this element to the items list in the 
        // first element, at the first index without removing any content
        jsonData[0].items.splice(0, 0, {
            name: $(this).closest("table").find(".name").text(),
            job: $(this).closest("table").find(".job").text(),
            size: $(this).closest("table").find(".size").text(),
            description: $(this).closest("td").siblings(".description").text()
        });

        // to show that it is properly appending the new information to the existing JSON object
        console.log(jsonData);
    });
    </script>

</body>
</html>

list.js -->

var jsonData = [
  {
    name: "Friends",
    items: [
      {
        name: "Steve",
        job: "pro bowler",
        size: "tall",
        description: "Steve's my man!"
      },
      {
        name: "Jessica",
        job: "HR",
        size: "average",
        description: "a dear friend"
      }
    ]
  },
  {
    name: "Co-Workers",
    items: [
      {
        name: "Martin",
        job: "my boss",
        size: "tall",
        description: "I don't like him"
      },
      {
        name: "Susan",
        job: "Intern",
        size: "average",
        description: "It's not like I have a crush on her or anything..."
      }
    ]
  }
]

同样，在控制台中可以看到 jsonData 中添加了“jenkins”的信息；但是，文本文件本身保持不变，我希望它反映这一添加。谢谢。

【问题讨论】：

标签： javascript php json ajax splice

【解决方案1】：

无法使用 JavaScript 更改本地文件系统上的文件（至少不是在所有浏览器中）。我会建议类似：

JavaScript：

$(".learn").click(function(){
    $.ajax({
        url: "save.php?action=save",
        method: "POST",
        data: { elem: {
            name: $(this).closest("table").find(".name").text(),
            job: $(this).closest("table").find(".job").text(),
            size: $(this).closest("table").find(".size").text(),
            description: $(this).closest("td").siblings(".description").text()
        }},
        success: function (data){
            console.log("Saved!");
        }
    });
}

PHP（保存.php）：

<?php
    if (!empty($_REQUEST["action"]) && $_REQUEST["action"] == "save" && !empty($_REQUEST["elem"])){
        $data = json_decode(file_get_contents("data.json"), true);
        $data[0]["items"][] = $_REQUEST["elem"];
        file_put_contents("data.json", json_encode($data));
    }
?>

这只是一个很小的例子。此外，您应该注意转义、检查字段、错误处理、同时更新（多个客户端）等 - 但它显示了一种可能的方法。

【讨论】：

这似乎将文件中的所有内容替换为添加的元素。
@laroy 我已经更新了上面的代码（忘记了 json_decode() 中的 true 也将对象作为数组处理）
当我读取 json 数据以填充我网站上的另一个表时，我将其称为 jsonData（如上面的代码所示）。假设您的示例中的“data.json”是list.js，它替换了代码中“var jsonData = [”的部分，我是否有办法克服这种替换，以便我可以继续参考文件是这样的吗？
不幸的是，无法将 JSON 数据直接从文件读取到 JavaScript，但也许有一个小解决方法。只需使用简单的 PHP 脚本读取 JSON 文件，以便它可以充当您的 list.js：echo "var jsonData = ".json_encode(file_get_contents("data.json"));