通过AJAX或PHP将JavaScript数据写入JSON文件
我有以下代码显示表中某个人的信息,当单击标记为“learn”的按钮时,该信息将存储在键/值类型数组中,然后将该数组拼接到指定的JSON对象中 所有这些都很好,但我想修改保存JSON对象本身的文件,这意味着我需要处理服务器端代码。如何将此插入到JSON对象中,并实际更改其存储的文本文件(这样,如果打开它,新信息就会出现) 我的代码如下--> index.html通过AJAX或PHP将JavaScript数据写入JSON文件,javascript,php,json,ajax,splice,Javascript,Php,Json,Ajax,Splice,我有以下代码显示表中某个人的信息,当单击标记为“learn”的按钮时,该信息将存储在键/值类型数组中,然后将该数组拼接到指定的JSON对象中 所有这些都很好,但我想修改保存JSON对象本身的文件,这意味着我需要处理服务器端代码。如何将此插入到JSON对象中,并实际更改其存储的文本文件(这样,如果打开它,新信息就会出现) 我的代码如下--> index.html <!DOCTYPE html> <html> <head> <script type=
<!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>
因此,在控制台中可以再次看到jsonData添加了“jenkins”的信息;但是,文本文件本身保持不变,我希望它能够反映这一添加。谢谢。不可能使用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(save.PHP):
这只是一个很小的例子。此外,您应该注意转义、字段检查、错误处理、同时更新(多个客户端)等,但它展示了一种可能的方法 这似乎用添加的元素替换了文件中的所有内容。@laroy我已经更新了上面的代码(忘记了
json_decode()
中的true
也将对象作为数组处理)当我读取json数据以填充网站上的另一个表时,我将其称为jsonData(如上面的代码所示)。假设示例中的“data.json”是list.js,它将替换代码中的“var jsonData=[”部分有没有办法克服这种替换,以便我可以继续以这种方式引用该文件?不幸的是,没有办法将JSON数据直接从文件读入JavaScript,但可能有一些解决方法。只需使用简单的PHP脚本读取JSON文件,它就可以充当您的列表。js:echo“var jsonData=”.json_encode(文件获取内容(“data.json”);
$(".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
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));
}
?>