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

【问题标题】：Can I do DOM manipulation within an Express POST request?我可以在 Express POST 请求中进行 DOM 操作吗？
【发布时间】：2019-02-20 16:32:09
【问题描述】：

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

【问题讨论】：

问得好，我认为对于 Web 开发的新手来说；无论使用哪种语言，这个问题都会出现很多。我试图通过一些可能的解决方案提供明确的答案。看看吧！
Express是一个NodeJS库，Node对DOM一无所知，所以答案是否定的。

标签： javascript node.js express frontend web-development-server

【解决方案1】：

一般来说，如果您想控制 DOM 在服务器端的外观，您需要在服务器端渲染整个页面，然后将其发送到前端。

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

提交表单
让用户知道表单正在提交到服务器（UX 的最佳实践）
收到回复后，可以随意操作 DOM
- 对于这个用例，我利用了 async/await 语法模式，它允许您等待响应，而不会以嵌套回调模式结束。

附加的截图将通过设置的超时值伪造对服务器的请求，并将您在表单中输入的内容回显到页面。它有 3 秒的延迟，并使用 AJAX 发出请求。

*您可以通过删除一些日志记录和 cmets 来简化此代码，但我已经使它变得比学习所需的更冗长。

**我故意将提交按钮放在表单元素之外，这样它就不会在提交时自动发布。如果您想以这种方式提交，您可以在函数中使用 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/

这个 Code Pattern 应该是您想要做的所有事情。同样，此请求也是通过 AJAX 进行的，因此 DOM 不需要完全重新加载；如果您实际上要向服务器发送常规帖子（没有 AJAX）然后重新加载页面，您可以做同样的事情 - 或者只是构建您想要发送到服务器端的新页面，然后重定向它们从那里。

我希望这会有所帮助！

【讨论】：

【解决方案2】：

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

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

但是你可以：

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

2) 运行一个客户端脚本，打开与服务器的连接（websockets、AJAX），然后在服务器发送内容时改变那里的 DOM。

【讨论】：