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

Question

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

Answer 1

一般来说，如果您想操纵 DOM 服务器端的外观，您需要呈现整个页面服务器端，然后将其发送到前端。

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

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

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

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

**我特意将提交按钮放在表单元素之外，这样它就不会在提交时自动 post。如果你想以这种方式提交，你可以在函数中使用 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，因此您可以看到它实际调用服务器并回显响应。

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

此 Code Pattern 应该是您所需要的全部内容。同样，此请求也已结束 [=52=]，因此 DOM 不需要完全重新加载；如果您实际上要向服务器制作一个常规 post（没有 AJAX）然后重新加载页面，您可以做同样的事情 - 或者简单地构建您想要发送的新页面到他们的服务器端，然后从那里重定向他们。

希望对您有所帮助！

Answer 2

Can I do DOM manipulation within an Express POST request?

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

但是你可以：

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

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

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

Can I do DOM manipulation within an Express POST request?

javascript

node.js

express

frontend

web-development-server