Javascript 从HTML表单更改json文件（更新）

我有一个JSON文件，我想通过HTML表单更改其属性：

<h1>product detail</h1>
<form>
    Name:<br>
    <input id="prod-name" type="text" name="name" readonly><br>
    Number:<br>
    <input id="prod-number" type="text" name="number" readonly>
    <br>
    <textarea id="prod-desc" name="description" cols="100" rows="10" readonly>description</textarea>
    <br>
    <textarea id="prod-img" name="images" cols="100" rows="10" readonly>images</textarea>
    <br>
</form>
<button id="save-changes">SAVE</button>

---

因此，基本上，我想更改JSON文件中的名称、编号和描述，请根据您的评论：

我认为有两种方法。一种是编辑javascript对象并将其发送回服务器。第二种方法（我觉得更简单）是在编辑表单时将表单发回。两者都要求项目具有某种不可编辑的唯一id，以便您可以跟踪服务器数据库中实际更新的内容

因此，只需使表单功能化（简化示例）：

此表单将向行动地址发出POST请求。该地址应该知道如何处理POST请求、获取它以及使用它更新服务器数据库

我不知道你在用什么服务器端。我也不知道你运行什么类型的数据库。如果是php，请查看PDO语句和$\u POST访问。这里回答太长了。但这两个术语应该会引导你付出一些努力，在这个过程中你会学到很多东西

一些有用的链接：

---

如果您使用ajax从服务器检索数据，是否可以使用ajax将其保存回服务器？…您必须将数据存储在服务器上，这意味着您必须将其发送回服务器。为什么不提交一个适当的提交输入表单并在服务器上处理数据呢？我想这样做，但我从来没有使用过PHP，因此我请求帮助。您可以详细说明正在发生的事情和您希望发生的事情的流程吗。例如：我不明白你为什么首先要获取JSON？您是否自动填写表单的某些部分并允许用户编辑它们？您希望用户填写的数据发生什么变化？它应该存储在数据库中吗？我有一个包含产品信息的JSON文件。它们通过只读输入显示在页面上。当我点击“更新”按钮时，这些输入停止为只读，用户可以编辑产品信息（这是任务，不是我的想法）。更新按钮消失，但显示“保存”按钮。现在我们可以编辑输入-产品信息-点击“保存”按钮后，json文件应该会更新非常感谢您的参与。我没有使用数据库-这只是route文件夹中的一个json文件。我想知道这是否可以做得简单一点——因为我不能自己更改json文件，所以我不能添加唯一的id。但是——输入的只读值是根据单击列表中的项目填充的，因此我有一个变量索引（在json中）及其产品（对象）数组中。因此，也许可以根据输入的新值以某种方式覆盖它或者我完全错了？好吧，现在我把这个索引作为一个隐藏输入，并以这种方式访问所有数据$index=$\u POST['index']；$name=$\u POST['name']；$number=$\u POST['number']；$description=$\u POST['description']；$jsonString=file\u get\u contents（'products.json'））$data=json_decode（$jsonString，true）；$data[$index]['name']=$name；$data[$index]['number']=$number；$data[$index]['description']=$description；$newJsonString=json_encode（$data）；文件内容（'products.json'，$newJsonString）；谢谢you@jake-弗格森很抱歉看到这些评论。干得好，伙计！

$('#save-changes').on('click', function () {
    json[index].name        = $("#prod-name").val();
    json[index].number      = $("#prod-number").val();
    json[index].description = $("#prod-desc").val();
});

<form name="yourForm" method="POST" action="pageHandlingUpdateRequestOnServer">

    <input name="db-item-id" type=hidden>
    <input name="prod-name" type="text">
    <input name="prod-number" type="integer">
    <input name="prod-desc" type="textarea">

    <input type="submit" value="Submit">
</form>