繁体   English   中英

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

[英]HTML form data to local JSON file without Node.js

因此,我正在构建一个 web 应用程序,该应用程序具有管理员选项并将数据添加到 JSON 文件,该文件将显示在另一个 HTML 页面(索引)上。

现在是我的问题:怎么做。 如何从表单中获取数据,对其进行解析,并将其放入 JSON 文件中。 并且可以在没有 Node.js 的情况下完成吗

这是我当前的 JSON 文件

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

这是我的“管理员”页面

<!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>

如果有人知道怎么做,或者有提示,请告诉我!

无法从浏览器内部直接写入文件系统。 但是,您可以创建“下载”链接,以便用户收到应下载文件的通知,并可以选择存储该文件的位置。

Stackoverflow 复制以下代码段:从浏览器下载 JSON object 作为文件 您可以使用它准确地创建包含您的 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();
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM