Ajax : 将表单数据附加到 json 文件而不 php

Question

我已经尝试了几个小时来让这个东西正常工作。我正在尝试将标题文本和内容文本附加到 .json 文件。我在这里看到了很多类似的问题，但是 php 不允许我使用它（老师的规则）。

我试过 Fetch API 但我发现它只处理来自 json 文件的获取请求。然而，我只在此处找到 ajax 函数，它们在函数前面使用 $。

我只是不知道如何在不使用 php 的情况下包含 json 文件的位置。名称文件 = posts.json。 json 中的示例： Picture json

这是我的代码 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重要部分：

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

    <div class="form-group">
        <label for="txtContent">Content</label>
        <textarea class="form-control" id="txtContent" rows="3"></textarea>
    </div>

    <div class="form-group">
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="reset" class="btn btn-primary">Reset</button>
    </div>
</form>

最后一张网站图片

Picture of the site

Answer 1

Ajax 是一个术语，意思是“在浏览器中从 JavaScript、运行发出 HTTP 请求，而不离开页面”。

您不能使用它直接写入服务器上的数据，因为不允许浏览器直接写入服务器。如果那是可能的，那么 Google 主页每秒将被破坏 30 次。

您需要一个 server-side 进程来接收 HTTP 请求并将数据写入文件（尽管数据库通常是更好的选择，因为它可以处理同时写入等问题）。如果您不想使用 PHP，那么您可以使用服务器支持的任何其他 server-side 编程语言。如果您不想使用其中任何一种，则可以将您的服务器更改为支持您要使用的语言的服务器。

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

Fetch API 可用于more-or-less任何类型的请求，具有任何类型的负载和任何类型的响应。

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

浏览器有两个 API 用于发出 Ajax 请求。 XMLHttpRequest 和 Fetch。（获取较新）。

有许多 third-party 库包装了 XMLHttpRequest and/or Fetch 以提供替代 API。 $ 是通常分配给 jQuery 的变量。它的主要 Ajax 辅助函数可以在 ajax 属性.

中找到

使用 third-party 库无法解决浏览器无法写入服务器的问题。

Ajax : 将表单数据附加到 json 文件而不 php

Ajax : append form data to json file without php

javascript

html

json

ajax

fetch-api