[英]How to save html field data in local json file without php and js node
[英]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.