通过本地运行的Html页面在我的机器上更新Json文件

时间:2017-11-06 21:01:26

标签: javascript python html npm

我希望在名为unknown的数组中组织数据,方法是将每个成员移动到名为good的数组或名为bad的数组中。

let data = {
    "bad":[], 
    "unknown": ["b", "a", "d", "g", "o", "o", "d"], 
    "good": []
};

变为:

data = {
    "bad":["b", "a", "d"], 
    "unknown": [], 
    "good": ["g", "o", "o", "d"]
};

我已经编写了一个小的html / javascript工具来帮助我这样做,如下所示:

http://jsfiddle.net/barra/121v4ow8/193/show/

我实际上已在我的本地计算机上运行上述代码,并且我通过Chrome中的“文件打开”对话框访问它。

我希望在本地计算机上读取/写入data对象文件。因此,例如,当加载html页面时,我希望读取数据。同样,我希望按照我的意愿保存更新的数据。对我来说,最简单最直接的方法是什么?此工具不会在任何阶段在线托管,因此我只会在我的机器上本地使用它。

如果python或节点可以用作这个简单解决方案(文件服务器等)的一部分,那么我也会对这些方法感兴趣。

2 个答案:

答案 0 :(得分:0)

您无法将其从浏览器(客户端代码)写入文件。

网页执行此操作的方式是使用服务器。服务器运行一些代码,它可以在JS(节点)PHP或ASP中运行,服务器代码通常将它存储在数据库中,并且有两个函数用于获取它和一个用于存储它 - 我们称之为端点。

然后您的客户端将使用AJAX来调用服务器并请求您的JSON(您的数组将存储在一个对象中),然后将其写回,通常是从提交按钮。

您需要告诉我们您是否拥有服务器所使用的语言,以便为您提供任何代码。

如果您在客户端上使用jquery,则可以使用ajax get和post方法

https://www.w3schools.com/jquery/jquery_ajax_get_post.asp

GET:将获取数据 POST:设置(保存)数据

答案 1 :(得分:0)

在这种情况下,没有像js/angularjs这样的客户端语言可以帮到你。相反,您可以使用节点来帮助您实现这一目标。例如。

  • 使用index.html服务器提供您的html文件(例如node),如下所示。 (这将是您的app.js文件)

    var express = require("express");
    var bodyParser = require("body-parser");
    var app = express(); 
    var fs = require('fs');
    var fileName = './file.json';
    var file = require(fileName);
    app.use(bodyParser.urlencoded({
    extended: false
    }));
    
    app.get('/', function (req, res) {
    res.sendFile(__dirname + '/index.html');
    });
    app.get('/getJsonFile', function (req, res) {
    res.sendFile(file);
    });
    
    app.post('/saveToFile', function (req, res) {
     file.object = req.body.data;
        fs.writeFile(fileName, JSON.stringify(file), function (err) {
         if (err) return console.log(err);
        console.log(JSON.stringify(file));
        console.log('writing to ' + fileName);
       });
        });
    
    
    app.listen(80, function () {
     console.log("Started on PORT 80");
     });
    

现在,在浏览器中点击localhost:3000会在浏览器中呈现html

Noe是时候与file进行json事了。

我假设您知道如何处理http get/post的{​​{1}}次请求。

现在将邮件请求发送到客户端的路由,例如

client

要获取该文件,您只需从客户端向$.post("/saveToFile", {data: yourJson}, function (data) { alert(data); });

发送获取请求即可

纬。希望这会有所帮助:)