HTML 表格数据到本地 JSON 文件，没有 Node.js

Question

So I'm building a web application with the option to be admin and add data to a JSON file, which will be displayed onto another HTML page (index).因此，我正在构建一个 web 应用程序，该应用程序具有管理员选项并将数据添加到 JSON 文件，该文件将显示在另一个 HTML 页面（索引）上。

Now is my question: how to do it.现在是我的问题：怎么做。 How to get the data from the form, parse it, and put it in a JSON file.如何从表单中获取数据，对其进行解析，并将其放入 JSON 文件中。 And can it be done without Node.js并且可以在没有 Node.js 的情况下完成吗

This is my current JSON-file这是我当前的 JSON 文件

{"accounts": [
  {"email": "example-mail@mail.com", "password2":"Duck123"},
  {"email": "example-mail2@mail.com", "password2":"Cow123"},
  {"email" : "example-mail3@mail.com", "password2": "Chicken123"}
]}

This is my "Admin" page这是我的“管理员”页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>ADMIN PAGE</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-8">
                <form id="adminform" action="#" method="post">
                    <div class="form-group">
                        <label for="emailadress">Email Address</label>
                        <input type="email" class="form-control" id="emailadress" required autocomplete="false">
                    </div>
                    <div class="form-group">
                        <label for="password2">Password</label>
                        <input type="password" class="form-control"  id="password2" required>
                        <input type="button" value="Show Password" readonly onclick="passwordShow()" autocomplete="false">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
</body>
<script>
//show password on button click
    function passwordShow() {
        var x = document.getElementById("password2");
        if (x.type === "password") {
            x.type = "text";
        } else {
            x.type = "password";
        }
    }
</script>
</html>

If somebody knows how to do it, or has a tip, please let me know!如果有人知道怎么做，或者有提示，请告诉我！

Answer 1

Direct writing to the filesystem can not be done from inside the Browser.无法从浏览器内部直接写入文件系统。 However you have the possibility to create a "download" link, so that the user gets a notification that a file should be downloaded and can pick a location where to store that file.但是，您可以创建“下载”链接，以便用户收到应下载文件的通知，并可以选择存储该文件的位置。

Copied the following snippet from Stackoverflow: Download JSON object as a file from browser .从Stackoverflow 复制以下代码段：从浏览器下载 JSON object 作为文件。 You can use it to create exactly that download containing your json content.您可以使用它准确地创建包含您的 json 内容的下载。

function downloadObjectAsJson(exportObj, exportName){
    var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
    var downloadAnchorNode = document.createElement('a');
    downloadAnchorNode.setAttribute("href",     dataStr);
    downloadAnchorNode.setAttribute("download", exportName + ".json");
    document.body.appendChild(downloadAnchorNode); // required for firefox
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
}

HTML 表格数据到本地 JSON 文件，没有 Node.js

问题描述

1 个解决方案

解决方案1
0 2020-07-06 09:08:54

HTML 表格数据到本地 JSON 文件，没有 Node.js

问题描述

1 个解决方案

解决方案1 0 2020-07-06 09:08:54

解决方案1
0 2020-07-06 09:08:54