PHP脚本追加JSON内容异常：覆盖文件且格式错误求助

看起来你遇到了两个典型的JSON操作问题：文件内容被覆盖，以及追加的内容格式不符合预期。咱们一步步拆解问题根源，然后给出完整的修复方案：

问题根源分析 #

1. 文件格式不兼容：你当前的json.json其实是JavaScript变量定义，不是标准JSON格式。PHP的json_decode无法解析var Checker = [...]这种语法，也不允许对象末尾的逗号，这直接导致后续的数组操作出错。
2. 错误的元素追加方式：你的PHP代码把字符串"{'name':'$name', 'url':'$url'}"作为数组元素添加，而不是创建关联数组，所以json_encode后生成的是字符串数组，而非你需要的对象数组。
3. JSON结构不能直接追加：JSON是完整的结构化数据，不能像文本文件那样直接追加字符串，必须先读取整个数组、修改后再重新写入完整内容。

修复步骤 #

1. 修正json.json为标准JSON格式 #

把原来的JS变量格式改成纯JSON数组（去掉var Checker =，删除对象末尾的逗号）：

[
  {"name":"Google", "url": "google.es"},
  {"name":"Yahoo", "url": "yahoo.com"}
]

2. 重构PHP处理代码 #

修改HTML中的PHP片段，确保正确读取、解析、修改JSON，然后完整写入文件：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $jsonPath = 'js/json.json';
    
    // 读取文件，解析为数组（解析失败时初始化空数组）
    $jsonContent = file_get_contents($jsonPath);
    $data = json_decode($jsonContent, true) ?: [];
    
    // 获取并过滤POST参数
    $siteName = trim($_POST['addname']);
    $siteUrl = trim($_POST['addlink']);
    
    // 验证参数非空后添加新元素
    if (!empty($siteName) && !empty($siteUrl)) {
        $data[] = [
            'name' => $siteName,
            'url' => $siteUrl
        ];
        
        // 编码为格式化的JSON，方便阅读
        $updatedJson = json_encode($data, JSON_PRETTY_PRINT);
        
        // 写入完整内容（覆盖是合理的，因为要保持JSON结构完整）
        file_put_contents($jsonPath, $updatedJson);
    }
}
?>

3. 调整JavaScript代码适配标准JSON #

原来的<script src="js/json.json">会报错，因为JSON不是JS代码。改用fetch读取JSON文件，同时更新Add方法，确保提交后刷新数据：

function start() {
    // 先读取JSON文件加载初始数据
    fetch('js/json.json')
        .then(res => res.json())
        .then(Checker => {
            var SSL = new function() {
                this.el = document.getElementById('urls');

                this.Count = function(data) {
                    const el = document.getElementById('counter');
                    const name = data > 1 ? 'urls' : 'url';
                    el.innerHTML = data ? `There are: ${data} ${name}` : `No ${name}`;
                };

                this.FetchAll = function() {
                    let data = '';
                    if (Checker.length > 0) {
                        for (let i = 0; i < Checker.length; i++) {
                            data += `
                                <tr>
                                    <td><a href="http://${Checker[i].url}">${Checker[i].name}</a></td>
                                    <td><button onclick="SSL.Edit(${i})">Edit</button></td>
                                    <td><button onclick="SSL.Delete(${i})">Delete</button></td>
                                </tr>
                            `;
                        }
                    }
                    this.Count(Checker.length);
                    this.el.innerHTML = data;
                };

                this.Add = function() {
                    const nameInput = document.getElementById('add-name');
                    const urlInput = document.getElementById('add-link');
                    const name = nameInput.value.trim();
                    const url = urlInput.value.trim();

                    if (name && url) {
                        // 发送POST请求提交数据
                        fetch(window.location.href, {
                            method: 'POST',
                            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                            body: `addname=${encodeURIComponent(name)}&addlink=${encodeURIComponent(url)}`
                        }).then(() => {
                            // 重新读取JSON更新界面
                            fetch('js/json.json')
                                .then(res => res.json())
                                .then(newData => {
                                    Checker = newData;
                                    SSL.FetchAll();
                                    nameInput.value = '';
                                    urlInput.value = '';
                                });
                        });
                    }
                };

                this.Edit = function(item) {
                    const nameInput = document.getElementById('edit-name');
                    const urlInput = document.getElementById('edit-link'); // 修正原来的id错误
                    nameInput.value = Checker[item].name;
                    urlInput.value = Checker[item].url;
                    document.getElementById('edit').style.display = 'block';

                    self = this;
                    document.getElementById('saveEdit').onsubmit = function(e) {
                        e.preventDefault();
                        const newName = nameInput.value.trim();
                        const newUrl = urlInput.value.trim();
                        if (newName && newUrl) {
                            Checker[item].name = newName;
                            Checker[item].url = newUrl;
                            self.FetchAll();
                            CloseInput();
                            // 如需持久化编辑内容，这里要添加POST请求到PHP
                        }
                    };
                };

                this.Delete = function(item) {
                    Checker.splice(item, 1);
                    this.FetchAll();
                    // 如需持久化删除，这里要添加POST请求到PHP
                };
            };

            SSL.FetchAll();

            // 关闭编辑框
            function CloseInput() {
                document.getElementById('edit').style.display = 'none';
            }
            window.CloseInput = CloseInput;
            window.SSL = SSL;
        })
        .catch(err => console.error('加载数据失败:', err));
}

4. 调整HTML细节 #

• 删除原来引入json.json的<script>标签
• 把编辑表单中的第二个输入框id从edit-name1改为edit-link，对应JS中的选择器

关键说明 #

• 为什么不能直接追加JSON：JSON是严格的结构化数据，直接追加字符串会破坏数组的闭合结构，导致整个文件无法解析。必须读取完整数组、修改后重新写入。
• 标准JSON的重要性：PHP的json_decode只识别标准JSON，JS变量格式会导致解析失败，进而引发后续所有操作错误。

内容的提问来源于stack exchange，提问作者Joanmi