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

Question

我正在使用基本的HTML / CSS前端，我目前有一个带有表单的登录页面，它将一些数据发送到数据库。请求完成后，预计会有某种响应。在这种情况下，我重新呈现页面，但是，我想用某种谢谢消息替换表单，这样用户就知道它已经正确发送了。我已经尝试过简单地使用一个单独的几乎相同的页面并删除和替换表单的解决方案，但是，这种代码克隆似乎是一种低效的方法。有没有办法可以在我的节点应用程序中进行某种前端DOM操作呢？

Answer 1

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

如果你想在前端收到请求之后简单地操作DOM，那么对于这类东西来说，这是一种非常常规的做法。无论使用哪种后端语言，您都可以：

• 提交表格
• 让用户知道表单正在提交给服务器（UX的最佳实践）
• 收到回复后，请按照您的意愿操纵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提供了一个echo服务，所以我也把相同的代码编写成一个小提琴，这样你就可以看到它实际调用服务器并回显响应。

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

此代码模式应该是您尝试执行的操作所需的全部代码模式。同样，这个请求也是通过AJAX，因此DOM不需要完全重新加载;如果您实际上要在服务器上定期发布（没有AJAX）然后重新加载页面，您可以做同样的事情 - 或者只是构建您想要发送给服务器端的新页面，然后重定向它们从那里。

我希望这有帮助！

Answer 2

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

不。服务器构建一个响应（一大块html），它被发送到客户端，解析它并构建DOM。您不能直接从服务器使用它。

但是你可以：

1）修改服务器发送的html（看看express.render）

2）运行clientide脚本，打开与服务器的连接（websockets，AJAX），然后在服务器发送内容时改变DOM。