2017-10-18 4 views
0

J'ai une page Web pour le formulaire d'inscription. J'ai besoin que les données entrées dans le formulaire soient stockées dans un fichier json afin qu'il puisse être utilisé lors de la connexion.comment ajouter des données au fichier json en utilisant javascript et ajax?

Je n'utilise aucun serveur Web. Je cours dans le navigateur. J'ai essayé le petit ajax mais ça m'a donné une erreur.

Mon fichier JSON (de file.json)

var details = [{ 
"username" : "[email protected]", 
"password" : "1234" 
}, 
{ 
"username" : "[email protected]", 
"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); 
} 

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

Quand je lance ce code et vérifier console, je reçois un erreur en disant:

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. 

que faut-il faire pour stocker mes nouvelles données utilisateur dans file.json?

+0

Vous ne pouvez pas utiliser le système de fichiers du navigateur, utiliser des cookies, le stockage de session ou le stockage local. – awd

+0

alors qu'est-ce qui doit être fait? – ineedanswerz

Répondre

0

Si vous utilisez le navigateur Chrome, cela vous empêchera d'ouvrir le fichier en raison de restrictions de sécurité inter-domaines. Le navigateur Firefox peut fonctionner pour vous.

Ma suggestion est installer un serveur local comme WAMP ou XAMP. Et essayez d'exécuter le fichier à partir de là.