Ajax：将表单数据附加到json文件而不需要php

Question

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

我尝试了 Fetch API，但发现它只处理来自 json 文件的 get 请求。然而我只在这里找到了 ajax 函数，它们在前面使用了 $ 。

我只是不知道如何在不使用 php 的情况下包含 json 文件的位置。名称文件 = posts.json。 json 内的示例： 图片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>

最后是网站的图片

< a href="https://i.sstatic.net/WAA3Q.png" rel="nofollow noreferrer">网站图片

Answer 1

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

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

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

---

我尝试了 Fetch API，但发现它只处理来自 json 文件的 get 请求。

Fetch API 可用于发出或多或少任何类型的请求、任何类型的负载和任何类型的响应。

但是我只在这里找到了 ajax 函数，它们在前面使用了 $。

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

有许多第三方库包装 XMLHttpRequest 和/或 Fetch 以提供替代 API。 $ 是 jQuery 通常分配的变量。它的主要 Ajax 辅助函数可以在 ajax 属性中找到。

使用第三方库并不能解决浏览器无法写入服务器的问题。