(初学者)如何动态修改json文件
(初学者)如何动态修改json文件
提问于 2019-08-15 22:52:31
目标:我想创建一个简单的网页，在其中可以修改div的样式，并将所有内容保存在一个json文件中，这样我们就可以在将来打开该文件时检索更改。
json文件的内容：
{
"width": 100,
"height": 100
}我设法用PHP读取我的json文件，并用表单输入编辑它，但每次修改都会刷新页面。这并不是最优的。
<!-- Json r/w -->
<?php
$file = file_get_contents("data.json");
$json = json_decode($file, true);
if(isset($_POST)) {
if($_POST['width'] != '') {
$json['width'] = $_POST['width'];
}
if($_POST['height'] != '') {
$json['height'] = $_POST['height'];
}
file_put_contents("data.json", json_encode($json));
}
?>
<!-- Datas infos -->
<p>
$file = <?= $file ?><br/>
$json = <?= $json ?><br/>
$width = <?= $json['width']; ?><br/>
$height = <?= $json['height']; ?>
</p>
<!-- Form -->
<form action="" method="post" id="form">
<input type="range" name="width" min="0" max="100" value="<?= $json['width']; ?>" step="10" onchange="submit()"><br/>
<input type="range" name="height" min="0" max="100" value="<?= $json['height']; ?>" step="10" onchange="submit()">
</form>
<!-- The stylized div -->
<div style="background: #000; width: <?= $json['width'];?>px; height: <?= $json['height'];?>px">
</div>有没有可能用更好的技术重现类似的结果？使用ajax还是其他什么？避免页面刷新？我迷失在论坛中寻找答案...
可以肯定的是:有必要使用form和php来修改本地json文件的内容吗？
提前感谢您的回答
回答 1
Stack Overflow用户
发布于 2019-08-16 00:03:37
为了在不重新加载页面的情况下应用更改，您需要避免提交表单。使用fetch或XMLHttpRequest将数据发送到服务器--服务器随后会将数据保存到JSON文件和/或使用现有的JSON进行响应。为此，您需要将代码分成两部分--服务器端部分读取/更新JSON文件，客户端部分是纯HTML，在字段更改时将请求发送到服务器。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57511562
复制相关文章
相似问题
腾讯云开发者
