Question

我有一个注册表单的网页。我需要将表单中输入的数据存储到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需要做些什么？

Answer 1

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

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

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

1 个答案: