如何使用jQuery向外部本地JSON文件的数组推送数据？

嘿，我来帮你解决这个问题～

首先得明确：你之前的代码$.getJSON('test.json', function(data) { data.push('Something'); });其实只是把JSON文件的内容读取到浏览器内存里的data对象中，修改的只是内存里的临时数据，根本没法直接写入本地的物理文件。这是浏览器的安全策略限制——前端JavaScript不允许直接读写用户本地文件，防止恶意网站搞事情。

那怎么实现把数据推到JSON文件的数组里呢？这里给你几个可行的方案，根据你的场景选就行：

因为前端碰不到本地文件，所以得让后端来处理写入逻辑。这里用Node.js的Express框架举个例子，很容易上手：

后端代码（server.js） #

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

// 解析前端发来的JSON请求体
app.use(express.json());

// 处理添加数据的接口
app.post('/add-data', (req, res) => {
  const jsonFilePath = path.join(__dirname, 'test.json');
  
  // 先读取现有JSON文件
  fs.readFile(jsonFilePath, 'utf8', (readErr, fileData) => {
    if (readErr) {
      return res.status(500).json({ error: '读取JSON文件失败' });
    }
    
    try {
      // 解析JSON内容为数组
      let jsonArray = JSON.parse(fileData);
      // 把前端传来的新数据推到数组里
      jsonArray.push(req.body.newItem);
      
      // 把更新后的数组写回JSON文件
      fs.writeFile(jsonFilePath, JSON.stringify(jsonArray, null, 2), (writeErr) => {
        if (writeErr) {
          return res.status(500).json({ error: '写入JSON文件失败' });
        }
        res.json({ success: true, updatedData: jsonArray });
      });
    } catch (parseErr) {
      res.status(400).json({ error: 'JSON文件格式有误，解析失败' });
    }
  });
});

// 启动服务器
app.listen(3000, () => {
  console.log('服务器跑在 http://localhost:3000 啦～');
});

前端jQuery代码 #

// 给后端发请求，提交要添加的数据
$.ajax({
  url: 'http://localhost:3000/add-data',
  method: 'POST',
  contentType: 'application/json',
  data: JSON.stringify({ newItem: 'Something' }),
  success: function(response) {
    console.log('数据成功写入JSON文件！更新后的数组:', response.updatedData);
  },
  error: function(err) {
    console.error('写入失败:', err.responseJSON?.error || '未知错误');
  }
});

如果只是想让用户得到更新后的JSON文件，不需要自动写入本地，可以生成一个新的JSON文件让用户手动下载保存：

$.getJSON('test.json', function(data) {
  // 先把新数据推到内存里的数组
  data.push('Something');
  // 把数组转成格式化的JSON字符串
  const updatedJsonStr = JSON.stringify(data, null, 2);
  // 创建Blob对象（二进制数据容器）
  const blob = new Blob([updatedJsonStr], { type: 'application/json' });
  // 创建临时下载链接
  const downloadUrl = URL.createObjectURL(blob);
  
  // 生成一个<a>标签触发下载
  const downloadLink = document.createElement('a');
  downloadLink.href = downloadUrl;
  downloadLink.download = 'updated-test.json'; // 下载后的文件名
  document.body.appendChild(downloadLink);
  downloadLink.click();
  
  // 清理临时资源
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(downloadUrl);
  
  console.log('更新后的JSON文件已触发下载～');
});

如果只是需要在浏览器里保存数据，不需要实际的JSON文件，可以用localStorage（永久保存，除非用户手动清除）或者sessionStorage（会话结束后消失）：

$.getJSON('test.json', function(initialData) {
  // 先从localStorage读取已保存的数据，没有的话用初始数据
  let savedData = localStorage.getItem('myAppData');
  savedData = savedData ? JSON.parse(savedData) : [...initialData];
  
  // 添加新数据
  savedData.push('Something');
  
  // 把更新后的数据存回localStorage
  localStorage.setItem('myAppData', JSON.stringify(savedData));
  
  console.log('数据已保存到浏览器本地存储！', savedData);
});

总结一下：

• 如果需要自动写入本地/服务器的JSON文件，选方案1；
• 如果只是想让用户获取更新后的JSON文件，选方案2；
• 如果只是需要前端本地持久化数据，不需要物理文件，选方案3。

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