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提供了回显服务，因此我也将相同的代码编写到了小提琴中，因此您可以看到它实际上是在调用服务器并回显响应。

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

此代码模式应该是您要做的所有工作。同样，此请求也是通过AJAX进行的，因此DOM不需要完全重新加载；如果您实际上要在服务器上发布常规帖子（不使用AJAX），然后在以后重新加载页面，则可以执行相同的操作-或只是构造要发送给服务器端的新页面，然后重定向它们从那里。

我希望这会有所帮助！

Answer 2

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

不。服务器建立一个响应（很大一部分html），该响应被发送到客户端，由它解析并构建DOM。您不能直接在服务器上使用它。

但是您可以：

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

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

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

2 个答案: