我可以在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语法模式，该模式将允许您等待响应而不会以嵌套的回调模式结束.

  摘录的附件将通过设置的超时值来伪造对服务器的请求，并将在表单中输入的内容回显到页面.延迟了三秒钟，并使用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提供了回显服务，因此我也将相同的代码编写到了小提琴中，因此您可以看到它实际上是在调用服务器并回显响应.

  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/

  此代码模式应该是您要做的所有工作.同样，此请求也是通过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屋！