如何将数据从网站保存到 json-server

Posted 2023-03-27

【中文标题】如何将数据从网站保存到 json-server

【英文标题】：How to save data from website to json-server

【发布时间】：2019-07-21 04:33:56

【问题描述】：

我是编程初学者，我正在制作一个网站项目，该项目有一个联系表格，我必须以某种方式保存输入中的数据。我只能使用本地存储来做到这一点，但在这种情况下它只保存最后一个输入，我想将数据保存在 json 服务器上。

这是我的联系表单 html：

<section class="enquiries">

  <input type="text" name="name" id="name" autofocus="autofocus" placeholder=" Name:"></input>
  <br>
  <input type="email" name="email" id="email" placeholder=" Email:"></input>
  <br>
  <input type="text" name="subject" id="subject" placeholder=" Subject:"></input>
  <br>

  <textarea id="extra" name="extra" placeholder=" Message..."></textarea>

</section>
<button class="button" type="submit">Send</button>

我已经安装了 json 服务器，创建了一个 db.json 文件，其中有：

  "contactInfo": [
    
      "id": 1,
      "name": "",
      "email": "",
      "subject": "",
      "extra": ""
    
  ]

当我向 Postman 提出请求时，它会起作用。 如何将它连接到我的服务器以及如何保存输入中的数据？

如果您能帮助我，我将不胜感激。提前致谢。

【问题讨论】：

如果它与邮递员一起工作，表格是否提交到相同的网址？ developer.mozilla.org/en-US/docs/Learn/HTML/Forms/…

【参考方案1】：

接下来呢：

<form action="/contactInfo" method="post">
  <section class="enquiries">

    <input type="text" name="name" id="name" autofocus="autofocus" placeholder=" Name:"></input>
    <br>
    <input type="email" name="email" id="email" placeholder=" Email:"></input>
    <br>
    <input type="text" name="subject" id="subject" placeholder=" Subject:"></input>
    <br>

    <textarea id="extra" name="extra" placeholder=" Message..."></textarea>

  </section>
  <button class="button" type="submit">Send</button>
</form>

不要忘记将表单元素放在<form> 标记内。

在您的情况下，/contactInfo 在 action 属性中，是指在您的 db.json 中定义的 JSON 对象的名称，不要这样说，您需要编写正确的端点有效 URL。

【讨论】：

你好 Rodrikor，非常感谢你的回答，它现在正在工作！但现在的问题是，每次我在输入中添加信息并按下提交按钮时，它都会直接显示创建的新对象，但我希望它保持在同一页面上，只是为了清除输入字段而不显示任何内容。如果我的问题很愚蠢，我深表歉意，但我该怎么做？

Here 就是答案。 "只在submit事件上处理表单提交，返回false"

如果答案满足您的问题，则认为它是正确的（：