Ajax : append form data to json file without php-CodePudding

I've been trying for hours to get this thing working. I'm trying to append the text of Title and the text of Content to a .json file. I've seen a lot of similar problems on here but with php and I'm not allowed to use it (Rule of the teacher).

I tried Fetch API but I found out that it only handles get requests from json files. Yet I only found ajax functions on here where they use $ in front of them.

I just don't know how to include the location of the json file without using php. name file = posts.json. Example inside json: Picture json

This is my code JS:

let form = document.getElementById('frm');
form.addEventListener('submit', PostBlog)

function PostBlog(){
    let title = document.getElementById("txtTitle");
    let content = document.getElementById("txtContent");
    let data = {title1: title.value}
    //let url = new URL("http://localhost:8080/admin.html");
    //let parms = new URLSearchParams({title1: title.value, content1: content.value});


        fetch("http://localhost:8080/admin.html",
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data),
        }
    ).then(receive).then(response => response.text()).then(Succeed).catch(problem)
}
function receive(response) {
    if(!(response.ok)){
        throw new Error("Didn't Receive "   response.status);
    }
    return response;
}
function problem(error){
    alert("Not Found "   error);
}
function Succeed(data){
    alert("Found "   data);
}

HTML important part:

<form id="frm">
    <div >
        <label for="txtTitle">Title</label>
        <input type="text"  id="txtTitle">
    </div>

    <div >
        <label for="txtContent">Content</label>
        <textarea  id="txtContent" rows="3"></textarea>
    </div>

    <div >
        <button type="submit" >Submit</button>
        <button type="reset" >Reset</button>
    </div>
</form>

And finally a picture of the site

Picture of the site

CodePudding user response：

Ajax is a term meaning "Making an HTTP request from JavaScript, running in the browser, without leaving the page".

You can't use it to directly write to data on the server, because browsers aren't allowed to simply write to servers. If that was possible, then the Google homepage would be vandalised 30 times per second.

You need a server-side process to take the HTTP request and write the data to the file (although a database is usually a better bet as that will take care of problems like simultaneous writes). If you don't want to use PHP then you can use any other server-side programming language the server supports. If you don't want to use any of those then you can change your server to one that supports the language you want to use.

I tried Fetch API but I found out that it only handles get requests from json files.

The Fetch API can be used to make more-or-less any kind of request with any kind of payload and any kind of response.

Yet I only found ajax functions on here where they use $ in front of them.

Browsers have two APIs for making Ajax requests. XMLHttpRequest and Fetch. (Fetch is newer).

There is numerous third-party libraries that wrap XMLHttpRequest and/or Fetch to provide alternative APIs. $ is the variable to which jQuery is commonly assigned. Its main Ajax helper function can be found in the ajax property.

The use of a third-party library won't solve the issue that browsers can't write to servers.