I can retrieve the data from the JSON file, but I can't add it

Question

I read that question(click). I read in similar articles. But it's not sending the data.

The program I want to do:

I'm trying to make a login program.
I have a JSON file that stores username and password data in it.
From the outside, I can capture the data in the JSON file. (not problem)
But I want to send the data. (this problem)
The system does not issue an "error" warning. But it does not send the data in the JSON file.

Example JSON file:

{
    "jack":"jack123",
    "rick":"rick123",
    "maria":"maria123"
}

HTML CODE:

<input type="text" id="username" placeholder="username">
<input type="text" id="password" placeholder="password">
<button onclick=run()>CLICK RUN</button>
<button onclick=run1()>CLICK RUN1</button>

JAVASCRIPT CODE:

  function run1(){
    var username = $("#username").val();
    var password = $("#password").val();
    let xmlRequest,obj;
    xmlRequest = new XMLHttpRequest();
    xmlRequest.onreadystatechange = function(){
      if(this.readyState === 4 && this.status === 200){
        obj = JSON.parse(this.responseText);
        var res = obj[username];
        if(res == password){
          alert(`Welcome ${username}`);
        }
      }
    } 
    xmlRequest.open("GET","http://localhost/deneme/info.json",true);
    xmlRequest.send();
  }


  function run(){
    var username = $("#username").val();
    var password = $("#password").val();
    let xmlRequest,obj;
    xmlRequest = new XMLHttpRequest();
    var url = "http://localhost/deneme/info.json";
    xmlRequest.open("POST", url, true);
    xmlRequest.onreadystatechange = function(){
      if(this.readyState === 4 && this.status === 200){
        obj = JSON.parse(this.responseText);
      }
    } 

    var data = JSON.stringify({username:password});
    xmlRequest.send(data);
  }

NOTE: I don't know PHP.

You cant post to a json file, client side js cannot manipulate server side files. It can just send/receive requests. You would need a server side language (like php) to make a request to which would then manipulate the file — Patrick Evans, Apr 27 '19 at 19:59
It is a very bad idea to verify passwords client-side. It can be easily bypassed... — FZs, Apr 27 '19 at 20:00
@PatrickEvans Can I export data to JSON file with PHP language? — , Apr 27 '19 at 20:01
@FZs I don't know the PHP language yet. So I wanted to try it. Just for a while. — , Apr 27 '19 at 20:03
You can try it for development, but you should **never** use it in production — FZs, Apr 27 '19 at 20:04
Use a php or any other serverside language to receive your ajax request. Here, you are only sending request to a simple json file. Use this method for testing only not for production. — , Apr 27 '19 at 20:05
yes php has file operation api, ie [file_put_contents](https://www.php.net/manual/en/function.file-put-contents.php) — Patrick Evans, Apr 27 '19 at 20:06

score 1 · Accepted Answer · edited Sep 06 '22 at 14:28

There are plenty of problems in what you are trying to do. Even if you are front-end, you need to know how back-end works. Go with node.js, it uses JavaScript to build simple servers.

What you are doing is sending request, but it cannot be processed because you don't have access to file system of your computer from client-side JavaScript.

How it works:
You send post request with some data. Your back-end gets this data and does something with it. Writes to file or to database or performs any other action. What you are missing is server-side. Again, watch some tutorial about how to install node.js, npm, how to make simple server.

Besides that, you mustn't store logins and passwords in text files, and especially without encryption. This is a no-no.

I can retrieve the data from the JSON file, but I can't add it

The program I want to do:

1 Answers1