无法向JSON文件添加数据及实现联系人编辑功能的技术求助

一、数据添加失败问题修复 #

核心问题点 #

1. 提交按钮未设置name="submit"，导致PHP中isset($_POST["submit"])判断始终不触发
2. PHP代码错误地将新数据追加到JSON根数组，而非personen子数组
3. 生成新JSON数据后未执行文件写入操作
4. 表单未显式设置提交目标，且提交后未刷新数据视图

修复代码 #

1. JavaScript修改（添加表单属性与按钮name）

在addPerson函数中，给提交按钮和表单补充必要属性：

// submit button
var submit = document.createElement('input');
submit.classList = 'details-sub';
submit.setAttribute("value","Hinzufügen");
submit.setAttribute("type","submit");
submit.setAttribute("name","submit"); // 新增：设置按钮name属性

// 表单添加action属性
var info = document.createElement('form');
info.classList.add("details-content");
info.setAttribute("method","post");
info.setAttribute("action",""); // 新增：提交到当前页面

2. PHP代码修复（修正数据结构与写入逻辑）

<?php
    $file_path = 'data.json';
    if(isset($_POST["submit"])){
        if(file_exists($file_path)){
            $current_data = file_get_contents($file_path);
            $array_data = json_decode($current_data, true);
            // 新数据追加到personen子数组
            $array_data['personen'][] = array(
                'vorname'       => $_POST['vorname'],
                'nachname'      => $_POST['nachname'],
                'telefonnummer' => $_POST['telefonnummer'],
                'email'         => $_POST['email']
            );
            $final_data = json_encode($array_data, JSON_PRETTY_PRINT);
            // 写入文件并刷新页面
            if(file_put_contents($file_path, $final_data)){
                header("Refresh:0");
            }
        }
    }
?>

二、联系人编辑功能实现 #

实现逻辑 #

1. 在联系人详情页添加编辑按钮，点击后切换为带现有数据的编辑表单
2. 通过联系人条目的ID提取数组索引，用于定位修改位置
3. 新增PHP逻辑处理编辑提交，更新对应索引的联系人数据
4. 提交后刷新页面更新视图

具体代码修改 #

1. JavaScript修改（添加编辑按钮与编辑表单）

更新showDetails函数，补充编辑功能：

function showDetails(e) {
  const view = document.getElementsByClassName("view")[0];
  view.style.opacity = 1;

  if (e.target.nodeName == 'LI') {
    const person = e.target.personData;
    const index = e.target.id.split('_')[1]; // 提取联系人索引

    var details = document.createElement('div');
    details.className = 'details';
    details.id = "test";
    view.style.opacity = 0;

    var close = document.createElement('div');
    close.className = 'details-close';
    close.innerHTML = 'zurück';
    close.addEventListener('click', e => {
      details.parentNode.removeChild(details);
      view.style.opacity =1;
    });

    // 添加编辑按钮
    var editBtn = document.createElement('button');
    editBtn.className = 'details-sub';
    editBtn.innerHTML = 'Bearbeiten';
    editBtn.style.right = '4.5em';
    editBtn.addEventListener('click', () => {
      info.innerHTML = '';
      // 创建编辑表单
      const form = document.createElement('form');
      form.setAttribute("method","post");
      form.setAttribute("action","");
      // 隐藏存储索引的输入框
      const indexInput = document.createElement('input');
      indexInput.setAttribute("type","hidden");
      indexInput.setAttribute("name","edit_index");
      indexInput.setAttribute("value", index);
      // 保存按钮
      const submitBtn = document.createElement('input');
      submitBtn.classList = 'details-sub';
      submitBtn.setAttribute("value","Speichern");
      submitBtn.setAttribute("type","submit");
      submitBtn.setAttribute("name","edit_submit");
      submitBtn.style.right = '9em';

      // 填充现有数据的输入框组（修正lable拼写为label）
      const vname = document.createElement('p');
      const vl = document.createElement('label');
      vl.innerHTML = "Vorname";
      const vi = document.createElement('input');
      vi.setAttribute("name","vorname");
      vi.setAttribute("type","text");
      vi.setAttribute("placeholder","Texteingabe");
      vi.setAttribute("required", "true");
      vi.setAttribute("value", person.vorname);
      vl.append(vi);
      vname.append(vl);

      const nname = document.createElement('p');
      const nl = document.createElement('label');
      nl.innerHTML = "Nachname";
      const ni = document.createElement('input');
      ni.setAttribute("name","nachname");
      ni.setAttribute("type","text");
      ni.setAttribute("placeholder","Texteingabe");
      ni.setAttribute("required", "true");
      ni.setAttribute("value", person.nachname);
      nl.append(ni);
      nname.append(nl);

      const tel = document.createElement('p');
      const tl = document.createElement('label');
      tl.innerHTML = "Telefonnummer";
      const ti = document.createElement('input');
      ti.setAttribute("name","telefonnummer");
      ti.setAttribute("type","tel");
      ti.setAttribute("placeholder","Eingabe v. Ortsvorwahl und Anschluss");
      ti.setAttribute("required", "true");
      ti.setAttribute("value", person.telefonnummer);
      tl.append(ti);
      tel.append(tl);

      const mail = document.createElement('p');
      const ml = document.createElement('label');
      ml.innerHTML = "E-mail";
      const mi = document.createElement('input');
      mi.setAttribute("name","email");
      mi.setAttribute("type","email");
      mi.setAttribute("placeholder","Eingabe einer E-Mailadresse");
      mi.setAttribute("required", "true");
      mi.setAttribute("value", person.email);
      ml.append(mi);
      mail.append(ml);

      form.append(indexInput, vname, nname, tel, mail, submitBtn);
      info.appendChild(form);
      details.append(submitBtn);
    });

    // 标题与详情内容
    const title = document.createElement('div');
    title.classList.add("details-title");
    const h1 = document.createElement('h1');
    h1.innerHTML="Detailansicht";
    title.appendChild(h1);

    var info = document.createElement('div');
    info.classList.add("details-content");
  
    const name = document.createElement('p');
    name.innerHTML ='Name: '+ person.nachname + ', ' + person.vorname;
    const tel = document.createElement('p');
    tel.innerHTML = 'Tel: '+ person.telefonnummer;
    const mail = document.createElement('p');
    mail.innerHTML = 'E-mail: '+ person.email;
   
    info.append(name,tel,mail);
    
    details.append(title, info);
    details.append(close);
    details.append(editBtn);
    document.body.append(details);
  }
}

2. PHP代码新增编辑处理逻辑

<?php
    $file_path = 'data.json';
    // 处理添加请求
    if(isset($_POST["submit"])){
        if(file_exists($file_path)){
            $current_data = file_get_contents($file_path);
            $array_data = json_decode($current_data, true);
            $array_data['personen'][] = array(
                'vorname'       => $_POST['vorname'],
                'nachname'      => $_POST['nachname'],
                'telefonnummer' => $_POST['telefonnummer'],
                'email'         => $_POST['email']
            );
            $final_data = json_encode($array_data, JSON_PRETTY_PRINT);
            if(file_put_contents($file_path, $final_data)){
                header("Refresh:0");
            }
        }
    }
    // 新增：处理编辑请求
    if(isset($_POST["edit_submit"])){
        if(file_exists($file_path)){
            $current_data = file_get_contents($file_path);
            $array_data = json_decode($current_data, true);
            $edit_index = intval($_POST["edit_index"]);
            if(isset($array_data['personen'][$edit_index])){
                $array_data['personen'][$edit_index] = array(
                    'vorname'       => $_POST['vorname'],
                    'nachname'      => $_POST['nachname'],
                    'telefonnummer' => $_POST['telefonnummer'],
                    'email'         => $_POST['email']
                );
                $final_data = json_encode($array_data, JSON_PRETTY_PRINT);
                if(file_put_contents($file_path, $final_data)){
                    header("Refresh:0");
                }
            }
        }
    }
?>

3. CSS补充编辑按钮样式

.details-sub {
    cursor: pointer;
}
button.details-sub {
    background-color: transparent;
    border: 0;
    font-size: 16px;
}

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