Can I do DOM manipulation within an Express POST request?

问题

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?

回答1:

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.

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:

Submit form
Let user know form is submitting to server (Best practice for UX)
Once you receive your response, manipulate the DOM however you would like
- For this use case, I've taken advantage of the async/await syntactical pattern which will allow you to wait for a response while not ending up in a nested callback pattern.

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.

**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 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.

Here is that link: https://jsfiddle.net/stickmanray/ug3mvjq0/37/

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.

I hope this helps!

回答2:

Can I do DOM manipulation within an Express POST request?

No. The server builds up a response (a big chunk of html), that gets sent to the client which parses it and builds up the DOM. You cannot directly work with that from the server.

However you can:

1) Modify the html the server sends (have a look at express.render)

2) Run a clientide script that opens a connection to the server (websockets, AJAX) and then mutate the DOM there when the server sends something.

来源：https://stackoverflow.com/questions/52356063/can-i-do-dom-manipulation-within-an-express-post-request

标签

javascript