You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何将表单GET/POST变量存入内存数组,无刷新页面并通过PHP写入JSON?

解决方案:表单内存存储 + PHP写入JSON文件

没问题,这两个需求都完全可行,我给你拆解成两部分一步步说明:


一、不刷新页面将表单变量存入内存数组

要实现仅在内存存储且不破坏页面状态,得靠前端JavaScript来处理——毕竟PHP是后端脚本,只有页面请求/刷新时才会执行,没法直接控制前端页面的内存状态。

具体做法很简单,用普通的JS变量就能实现纯内存存储(页面关闭/刷新后数据会丢失,完全符合你的需求):

示例代码:

// 声明一个空数组,用来存表单数据(纯内存存储)
let formDataArray = [];

// 假设你有一个添加按钮,点击时收集表单数据并存入数组
document.getElementById('add-btn').addEventListener('click', function() {
  // 从表单输入框中收集数据,构造和现有members格式一致的对象
  const newMember = {
    Class: document.getElementById('class-input').value,
    Rating: document.getElementById('rating-input').value,
    ID: document.getElementById('id-input').value,
    Name: document.getElementById('name-input').value,
    Expires: document.getElementById('expires-input').value
  };
  
  // 把新对象推入内存数组
  formDataArray.push(newMember);
  
  // 可以在这里做一些即时反馈,比如打印数组查看
  console.log('当前内存中的表单数据:', formDataArray);
});

如果需要临时跨页面保存(但依然是会话级,关闭浏览器就丢失),可以改用sessionStorage,但本质还是前端存储,不会刷新页面:

// 存入sessionStorage
sessionStorage.setItem('formData', JSON.stringify(formDataArray));
// 读取时
formDataArray = JSON.parse(sessionStorage.getItem('formData')) || [];

二、用PHP向JSON文件添加数据

首先注意你提供的现有数据是var members = [...],这是JavaScript变量声明,不是标准JSON格式。第一步要把文件改成纯JSON:去掉var members = 和结尾的分号,变成如下格式(保存为members.json):

[
  {
    "Class": "B",
    "Rating": "1776",
    "ID": "12537964",
    "Name": "Ahmed, Jamshed",
    "Expires": "2018.10.18"
  },
  {
    "Class": "C",
    "Rating": "1500",
    "ID": "12210580",
    "Name": "Attaya, James",
    "Expires": "2019.01.12"
  }
]

接下来是PHP的处理逻辑,分为普通表单提交和AJAX无刷新提交两种场景:

场景1:普通表单提交(页面会刷新)

<?php
// JSON文件路径
$jsonFilePath = 'members.json';

// 1. 读取现有JSON内容并解码为PHP数组
$jsonContent = file_get_contents($jsonFilePath);
$members = json_decode($jsonContent, true);

// 2. 获取表单提交的POST数据(确保表单的name属性和键名一致)
$newMember = [
  'Class' => $_POST['Class'],
  'Rating' => $_POST['Rating'],
  'ID' => $_POST['ID'],
  'Name' => $_POST['Name'],
  'Expires' => $_POST['Expires']
];

// 3. 添加新数据到数组
$members[] = $newMember;

// 4. 重新编码为JSON(JSON_PRETTY_PRINT保证格式美观)
$updatedJson = json_encode($members, JSON_PRETTY_PRINT);

// 5. 写回JSON文件
file_put_contents($jsonFilePath, $updatedJson);

// 提交后跳转回原页面(可选)
header('Location: your-form-page.php');
exit;
?>

场景2:AJAX无刷新提交(配合前端实现不刷新页面)

如果要和前面的内存存储结合,做到完全不刷新页面,就用AJAX发送数据到PHP脚本:

前端JS代码(配合前面的内存存储):

document.getElementById('save-btn').addEventListener('click', async function() {
  const newMember = {
    Class: document.getElementById('class-input').value,
    Rating: document.getElementById('rating-input').value,
    ID: document.getElementById('id-input').value,
    Name: document.getElementById('name-input').value,
    Expires: document.getElementById('expires-input').value
  };
  
  // 先存入内存数组
  formDataArray.push(newMember);
  
  // 用fetch发送AJAX请求到PHP脚本
  try {
    const response = await fetch('save-member.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(newMember),
    });
    
    const result = await response.json();
    if (result.status === 'success') {
      alert('数据已成功写入JSON文件!');
    }
  } catch (error) {
    console.error('保存失败:', error);
  }
});

对应的PHP脚本(save-member.php):

<?php
$jsonFilePath = 'members.json';

// 接收AJAX发送的JSON数据
$newMember = json_decode(file_get_contents('php://input'), true);

// 读取现有数据
$jsonContent = file_get_contents($jsonFilePath);
$members = json_decode($jsonContent, true);

// 添加新数据
$members[] = $newMember;

// 写回文件
$updatedJson = json_encode($members, JSON_PRETTY_PRINT);
file_put_contents($jsonFilePath, $updatedJson);

// 返回成功响应
echo json_encode(['status' => 'success']);
?>

内容的提问来源于stack exchange,提问作者verlager

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.25 03:29:30