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

If you want to simply manipulate the DOM after a request is received on the front end, whic is a pretty regular practice for this type of stuff; regardless of the back end language(s) used, you can:

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

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

  The attached snipped will fake a request to the server through a set timeout value, and echo what you put into the form back to the page. It's on a three second delay and uses AJAX to make the request.

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

  *You can simplify this code by removing some logging and comments, but I've made it more verbose than necessary for learning purposes.

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

  **I've purposely put the submit button outside of the form element so that it does not auto-post on submit. If you want to submit this way, you can use event.preventDefault() within the function, catch the event before it bubbles, and do this instead. Either way will work fine.

  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，这样您就可以看到它实际上调用了服务器并回显了响应.

  JSFiddle offers an echo service so I've also written the same code into a fiddle so you can see it actually call the server and echo back the response.

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

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

  This code pattern should be all you need for what you are trying to do. Again, this request is also over AJAX so the DOM does not need to completely reload; if you are actually going to be making a regular post (without AJAX) to the server and then reload the page afterwards, you can do the same thing - or simply construct the new page you wanted to send to them server side and then redirect them from there.

  我希望这会有所帮助！