javascript - 我可以在 Express POST 请求中进行 DOM 操作吗？

Question

我正在使用基本的 HTML/CSS 前端，目前我有一个登陆页面，上面有一个表单，可将​​一些数据发送到数据库。当请求完成后，它期待某种响应。在这种情况下，我正在重新渲染页面，但是，我想用某种感谢消息替换表单，以便用户知道它已正确发送。我尝试过简单地创建一个几乎相同的单独页面，并删除和替换表单的解决方案，但是，这种代码克隆似乎是一种低效的方法。有没有办法可以在我的 Node 应用程序中进行某种前端 DOM 操作？

Answer 1

通常，如果您想操纵 DOM 在服务器端的外观，您需要在服务器端渲染整个页面，然后将其发送到前端。

如果你想在前端收到请求后简单地操作 DOM，这是此类内容的常见做法；无论使用何种后端语言，您都可以:

• 提交表单
• 让用户知道表单正在提交到服务器(用户体验最佳实践)
• 收到响应后，按照您的意愿操作 DOM
  • 对于此用例，我利用了 async/await 语法模式，它允许您等待响应，同时不会陷入嵌套回调模式。

附加的片段将通过设置的超时值向服务器伪造请求，并将您输入表单的内容回显到页面。它延迟三秒并使用 AJAX 发出请求。

*您可以通过删除一些日志记录和注释来简化此代码，但出于学习目的，我已将其变得比必要的更加冗长。

**我特意将提交按钮放在表单元素之外，这样它就不会在提交时自动发布。如果你想以这种方式提交，你可以在函数中使用 event.preventDefault() ，在事件冒泡之前捕获事件，然后执行此操作。无论哪种方式都可以正常工作。

async function getDataAsync0(data) {
  return new Promise(async (res) => {
    setTimeout(()=>{
      res(data);
    },3000)
  });
}

$(`#submitButton`).click(async () => {
  // Create div to display what's going on
  let statusAreaElement = $(`#statusArea`);
  // Submit Event
  statusAreaElement.html(`Submitted... Waiting for response...`);
  // Cache input element
  let inputElement = $(`#input01`);
  // Cache form element
  let formWrapperElement = $(`#formWrapper`);
  // Cache success message div
  let successMessageElement = $(`#successMessage`);
  // Get value
  let value = inputElement.val();
  // Send value, await response;
  let response = await getDataAsync0(value);
  statusAreaElement.html(`Response returned -> ${response}`)
  // Clear input element
  inputElement.val(``);
  // Hide form, show success message
  formWrapperElement.hide();
  successMessageElement.show();
})

#statusArea {
  position: absolute;
  left: 0;
  bottom: 0;
}

#successMessage {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="formWrapper">
  <form>
    <label for="input01">Form Input</label>
    <input id="input01" type="text">
  </form>
  <button id="submitButton">
      Submit Form
  </button>  
</div>

<div id="successMessage">
    Thanks for your submission!
</div>

<div id="statusArea">
</div>

JSFiddle 提供了回显服务，因此我也将相同的代码写入了 fiddle，这样您就可以看到它实际上调用了服务器并回显了响应。

这是该链接: https://jsfiddle.net/stickmanray/ug3mvjq0/37/

此代码模式应该是您尝试执行的操作所需的全部内容。同样，此请求也是通过 AJAX 进行的，因此 DOM 不需要完全重新加载；如果您实际上要向服务器发送常规帖子(不使用 AJAX)，然后重新加载页面，您可以做同样的事情 - 或者简单地构造您想要发送给服务器端的新页面，然后重定向它们从那里。

希望这会有所帮助!