通过jq读取和修改json数据

我接到了这么一个任务，页面就是非常简单的页面，不需要搭建好的后台，也没什么数据库，在这个条件下，点击“预约”按钮，可以保存点击用户的数量。

要求很明确，要保存，不能刷新或者第二天数量就变了，所以是一定要有文件保存这数据的。

我的参考了网上大部分的内容，发现单纯通过JavaScript是不能修改文件的，所以需要php配合，好在是放在服务器里的，有php环境。

以下就是非常简单的代码实现。

注入了jq后，页面代码：

<div class="number">
    <span id="yynum">0</span>
</div>
<div class="yuyue">
    <a href="javascript:;" onclick="updateBtn()" title="预约">
        <img src="./images/kb00.png" width="220">
    </a>
</div>
<script>
    $(function() {
        updatehtml();
    })
    //更新页面
    function updatehtml(){
        $.ajax({
            url: "data.json", //同文件夹下的json文件路径
            type: "GET", //请求方式为get
            dataType: "json", //返回数据格式为json
            success: function(data) { //请求成功完成后要执行的方法 
                console.log("获取json数据成功，ajax刷新数据。");
                $("#yynum").html(data.yynum);
                console.log(data);
            }
        })
    }
    //按钮，获取json数据传递到修改方法
    function updateBtn() {
        var yynum = 0;
        $.ajax({
            url: "data.json", //同文件夹下的json文件路径
            type: "GET", //请求方式为get
            dataType: "json", //返回数据格式为json
            success: function(data) { //请求成功完成后要执行的方法 
                yynum = data.yynum;
                console.log("请求存储的json数据，yynum="+yynum);
                updateFile(yynum)
            }
        })
        // 获取输入的内容
    }
    //修改json数据
    function updateFile(yynum){
        var newContent = '{"yynum":"'+ (parseInt(yynum) + 1) +'"}';
        $.ajax({
            url: "update.php", // 后端处理文件的路径
            type: "POST",
            data: {
                content: newContent
            }, // 发送给后端的数据
            success: function(response) {
                $("#yynum").html(parseInt(yynum) + 1);
                console.log("文件已成功修改");
            },
            error: function(xhr, status, error) {
                console.log("修改文件时发生错误：" + error);
            }
        });
    }
</script>

update.php代码：

<?php
$content = $_POST['content']; // 接收前端传递过来的修改内容
$filename = 'data.json'; // 待修改的本地文件，可以根据实际情况更改
if(file_exists($filename)) // 检查文件是否存在
{
file_put_contents($filename, $content); // 修改文件内容
echo "文件已成功修改";
}
else
{
echo "文件不存在";
}
?>0

data.json代码

{"yynum":"0"}

最简单的三个文件，index.html，update.php，data.json，同一级，然后放在服务器根目录，就能运行了。

这样每次点击预约按钮，就实现了文件里数字的增长。

至于如何实现一台电脑只能预约1次，就属于其他内容了。