Question

例如，我有一个.JSON文件，其中包含以下内容：

[{"honda": "accord", "color": "red"},{"ford": "focus", "color": "black"}]

将另一个对象{"nissan": "sentra", "color": "green"}推入此.json数组以使.json文件看起来像

的javascript代码是什么？

[{"honda": "accord", "color": "red"},{"ford": "focus", "color": "black"},{"nissan": "sentra", "color": "green"}]

我问的原因是我在网上找到了很多关于如何使用AJAX从.json文件中提取数据但是没有使用AJAX将新数据写入.json文件来更新.json文件的信息附加数据。

任何帮助将不胜感激！

Answer 1

你必须明确你的意思＆＃34; JSON＆＃34;。

有些人错误地使用术语JSON来引用普通的旧JavaScript对象，例如[{a: 1}]。这个恰好是一个数组。如果要向数组中添加新元素，只需push，就像在

中一样

var arr = [{a: 1}];
arr.push({b: 2});

< [{a: 1}, {b: 2}]

单词JSON也可用于引用以JSON格式编码的字符串：

var json = '[{"a": 1}]';

注意（单个）引号表示这是一个字符串。如果您有从某处获得的字符串，则需要先使用JSON.parse将其解析为JavaScript对象：

var obj = JSON.parse(json);

现在您可以按照自己的方式操作对象，包括push，如上所示。如果您希望将其放回JSON字符串中，则使用JSON.stringify：

var new_json = JSON.stringify(obj.push({b: 2}));
'[{"a": 1}, {"b": 1}]'

JSON还用作格式化数据的常用方法，用于与服务器之间传输数据，可以保存（保留）数据。这就是ajax的用武之地.Ajax用于从服务器获取数据（通常是JSON格式），和/或以JSON格式发送数据到服务器。如果您收到来自jj格式的ajax请求的响应，则可能需要JSON.parse，如上所述。然后你可以操作对象，用JSON.stringify将它放回JSON格式，并使用另一个ajax调用将数据发送到服务器进行存储或其他操作。

您使用术语＆＃34; JSON文件＆＃34;。通常，单词＆＃34; file＆＃34;用于指代某些设备上的物理文件（不您在代码中处理的字符串，或JavaScript对象）。浏览器无法访问计算机上的物理文件。它无法读取或写入它们。实际上，浏览器甚至没有＆＃34;文件＆＃34;的概念。因此，您不能只在本地计算机上读取或写入某些JSON文件。如果要向服务器发送JSON和从服务器发送JSON，当然，服务器可能将JSON存储为文件，但服务器更可能基于某些ajax请求构建JSON，基于从数据库检索的数据，或在某些ajax请求中解码JSON，然后将相关数据存储回其数据库中。

你真的有一个＆＃34; JSON文件＆＃34;，如果有的话，它存在于哪里以及你从哪里得到它？你有一个JSON格式的字符串，你需要解析，mainpulate，并转回一个新的JSON格式字符串？您是否需要从服务器获取JSON并修改它然后将其发送回服务器？或者是你的＆＃34; JSON文件＆＃34;实际上只是一个JavaScript对象，您只需要使用普通的JavaScript逻辑进行操作吗？

Answer 2

可以使用JSON.stringify将JSON编写到本地存储中以序列化JS对象。您不能仅使用JS写入JSON文件。只有cookie或本地存储

    var obj = {"nissan": "sentra", "color": "green"};

localStorage.setItem('myStorage', JSON.stringify(obj));

稍后检索对象

var obj = JSON.parse(localStorage.getItem('myStorage'));

Answer 3

不幸的是，今天（2018年9月）您找不到用于客户端文件编写的跨浏览器解决方案。

例如：：在某些浏览器（例如Chrome）中，我们今天有这种可能性，我们可以与 FileSystemFileEntry.createWriter() 一起与客户进行交流旁听，但根据文档：

该功能已过时。尽管它可能在某些浏览器中仍然可以使用，但不建议使用它，因为可以随时将其删除。尝试避免使用它。

  对于IE（而不是MS Edge），我们也可以使用ActiveX，但这仅适用于此客户端。

如果要跨浏览器更新JSON文件，则必须同时使用服务器端和客户端。

客户端脚本

在客户端，您可以向服务器发出请求，然后必须从服务器读取响应。或者，您也可以使用 FileReader 读取文件。对于跨浏览器写入文件，您必须具有一些服务器（请参阅下面的服务器部分）。

var xhr = new XMLHttpRequest(),
    jsonArr,
    method = "GET",
    jsonRequestURL = "SOME_PATH/jsonFile/";

xhr.open(method, jsonRequestURL, true);
xhr.onreadystatechange = function()
{
    if(xhr.readyState == 4 && xhr.status == 200)
    {
        // we convert your JSON into JavaScript object
        jsonArr = JSON.parse(xhr.responseText);

        // we add new value:
        jsonArr.push({"nissan": "sentra", "color": "green"});

        // we send with new request the updated JSON file to the server:
        xhr.open("POST", jsonRequestURL, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        // if you want to handle the POST response write (in this case you do not need it):
        // xhr.onreadystatechange = function(){ /* handle POST response */ };
        xhr.send("jsonTxt="+JSON.stringify(jsonArr));
        // but on this place you have to have a server for write updated JSON to the file
    }
};
xhr.send(null);

服务器端脚本

您可以使用很多不同的服务器，但是我想写有关PHP和Node.js服务器的信息。

使用搜索机可以找到“ free PHP Web Hosting *”或“ free Node.js Web Hosting”。对于PHP服务器，我建议000webhost.com，对于Node.js，我建议阅读this list。

PHP服务器端脚本解决方案

用于从JSON文件读取和写入的PHP脚本：

<?php

// This PHP script must be in "SOME_PATH/jsonFile/index.php"

$file = 'jsonFile.txt';

if($_SERVER['REQUEST_METHOD'] === 'POST')
// or if(!empty($_POST))
{
    file_put_contents($file, $_POST["jsonTxt"]);
    //may be some error handeling if you want
}
else if($_SERVER['REQUEST_METHOD'] === 'GET')
// or else if(!empty($_GET))
{
    echo file_get_contents($file);
    //may be some error handeling if you want
}
?>

Node.js服务器端脚本解决方案

我认为Node.js对于初学者来说有点复杂。这不是浏览器中的普通JavaScript。在开始使用Node.js之前，我建议您先阅读两本书：

用于从JSON文件读取和写入的Node.js脚本：

var http = require("http"),
    fs = require("fs"),
    port = 8080,
    pathToJSONFile = '/SOME_PATH/jsonFile.txt';

http.createServer(function(request, response)
{
    if(request.method == 'GET')
    {
        response.writeHead(200, {"Content-Type": "application/json"});
        response.write(fs.readFile(pathToJSONFile, 'utf8'));
        response.end();
    }
    else if(request.method == 'POST')
    {
        var body = [];

        request.on('data', function(chunk)
        {
            body.push(chunk);
        });

        request.on('end', function()
        {
            body = Buffer.concat(body).toString();
            var myJSONdata = body.split("=")[1];
            fs.writeFileSync(pathToJSONFile, myJSONdata); //default: 'utf8'
        });
    }
}).listen(port);

Node.js的相关链接：

如何使用Javascript

3 个答案:

客户端脚本

服务器端脚本