如何使用 javascript 和 ajax 将数据附加到 json 文件？答案

【问题标题】：how to append data to json file using javascript and ajax?如何使用 javascript 和 ajax 将数据附加到 json 文件？
【发布时间】：2018-03-30 00:14:58
【问题描述】：

我有一个注册表单网页。我需要将表单中输入的数据存储到 json 文件中，以便在登录时使用。

我没有使用任何网络服务器。我在浏览器中运行。我尝试了小 ajax，但它给了我错误。

我的 JSON 文件 (file.json)

var details = [{
"username" : "user@example.com",
"password" : "1234"
},
{
"username" : "user1@example.com",
"password" : "12345"
}]

JavaScript：

function signup()
{

    var username = document.getElementById("uname").value;
    var password = document.getElementById("psw").value; 
  var xhttp = new XMLHttpRequest();
 var data = "username=username&password=password";
  xhttp.open("POST", "file.json", true);
  xhttp.send(data);
}

我的 HTML

<!DOCTYPE html>
<html>
<title>Signup</title>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="file.json"></script>
<body>

<h2 style="text-align:center;">Signup Form</h2>  
  <div style="width:800px; margin:0 auto;border: 5px solid #f1f1f1;">
  <form  action="Javascript:signup();" style="padding-left:85px;">
    <label><b>&nbspEmail id :</b></label>
    <input type="text" placeholder="Enter Email" id="uname" required;>
    <label><b>&nbsp&nbsp&nbsp&nbspYour Full Name :</b></label>
    <input type="text" placeholder="Enter Name" id="name" required;><br>
     </div>
      <div style="width:716px; margin:0 auto;border: 5px solid #f1f1f1;padding-left:85px">
    <label><b>Password:</b></label>
    <input type="password" placeholder="Enter Password" id="psw" required>
    <label><b>Re-enter Password:</b></label>
    <input type="password" placeholder="Re-Enter Password" id="pswc" required onkeyup="passcheck(this.value);"><br>
    </div>
      <div style="margin:0 auto;padding-left:600px">
    <button type="submit" >Signup</button><br>
      <a href="login.html">Login now</a>
    </form>
  </div>
<div style="text-align:center;" id="error"></div>

</body>
</html>

当我运行此代码并检查控制台时，我收到一条错误消息：

Failed to load file:///C:/Users/Victor/Documents/login%20js/file.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

如何将我的新用户数据存储到 file.json？

【问题讨论】：

您不能从浏览器使用文件系统，不能使用 cookie、会话存储或本地存储。
那该怎么办呢？

标签： javascript jquery html json ajax

【解决方案1】：

如果您使用的是 Chrome 浏览器，由于跨域安全限制，它会阻止您打开文件。 Firefox 浏览器可能适合您。

我的建议是安装一些本地服务器，例如 WAMP 或 XAMP。并尝试从那里运行文件。

【讨论】：