使用 Dataform Javascript 处理 SPA 表单 - 不在 URL 中留下表单信息

Question

我正在使用 express、mongoose 和 JavaScript 创建单页应用程序。代码有效，除了 我不想使用 post 请求在 URL 中保留表单信息。 我尝试了重定向，但它以循环结束 - 我认为。

我没有使用 form method="post" 因为它会重定向页面并且这是一个 SPA。我不想在没有查询信息的情况下显示此信息或从 URL 重定向到同一页面。

http://localhost:2000/?firstName=John&lastName=James&age=40

这是表格(index.html) --

<form id="formId">
      <input type="text" name="firstName">
      <input type="text" name="lastName">
      <input type="text" name="age">
      <button type="submit" onclick="processForm(event)">Save</button>
</form>

这是表单处理的 JS：

function processForm(event){
  var formData = new FormData(document.forms[0])
  const queryString = Object.fromEntries(
    Array.from(formData.keys()).map(key => [
    key, formData.getAll(key).length > 1 ?
    formData.getAll(key) : formData.get(key)]));
  postData(queryString);   
}

async function postData(data) {
  fetch('/people', {
    method: 'POST', 
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(data),
  })
  .then(response =>response.json())
  .then(data => console.log('Success:', data))
  .catch((error) => {
  console.error('Error:', error);
  });
};

Answer 1

由于这是一个 SPA 应用程序并且您想通过 AJAX 处理表单，您应该停止页面的默认表单处理程序（这是一种重定向）。

您可以使用 event.preventDefault()

因此您的代码应如下所示：

function processForm(event){
  event.preventDefault();
  ...rest of the form handling logic
}

此外，您可能希望使用 form.onsubmit 事件而不是 button.onclick 事件来发送数据。

使用 Dataform Javascript 处理 SPA 表单 - 不在 URL 中留下表单信息

SPA forms handling with Dataform Javascript - Not leaving form info in URL

javascript

mongodb

dataform

express

single-page-application