我可以在 Express POST 请求中进行 DOM 操作吗? [英] Can I do DOM manipulation within an Express POST request?

问题描述

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

I'm working with basic HTML/CSS frontend, I currently have a landing page with a form on it that sends some data to a database. When the request is done, it is expecting some sort of response. In this case, I am re-rendering the page, however, I want to replace the form with some sort of a thank you message, something so the user knows that it has sent correctly. I have tried the solution of simply having a separate near identical page with the form removed and replaced, however, this kind of code cloning seems like an inefficient way to do it. Is there a way I could do some sort of front-end DOM manipulation from within my node app instead?

推荐答案

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

Generally, if you want to manipulate how the DOM looks server side you would need to render your entire page server side and then send it to the front end.

如果您想在前端收到请求后简单地操作 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.

  我希望这会有所帮助！

  这篇关于我可以在 Express POST 请求中进行 DOM 操作吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！