Могу ли я делать манипуляции с DOM в запросе Express POST? - PullRequest
Новая
       17

Могу ли я делать манипуляции с DOM в запросе Express POST?

0 голосов
/ 16 сентября 2018

Я работаю с базовым интерфейсом HTML / CSS, в настоящее время у меня есть целевая страница с формой, которая отправляет некоторые данные в базу данных.Когда запрос выполнен, он ожидает какой-то ответ.В этом случае я перерисовываю страницу, однако я хочу заменить форму чем-то вроде благодарственного сообщения, чтобы пользователь знал, что он отправил правильно.Я попытался решить проблему, заключающуюся в том, чтобы просто удалить отдельную почти идентичную страницу с удаленной и замененной формой, однако этот вид клонирования кода кажется неэффективным способом сделать это.Есть ли способ, которым я мог бы сделать какую-то внешнюю манипуляцию DOM из моего узла приложения вместо этого?

Ответы [ 2 ]

0 голосов
/ 16 сентября 2018

Можно ли манипулировать DOM в запросе Express POST?

Нет.Сервер создает ответ (большой кусок html), который отправляется клиенту, который анализирует его и создает DOM.Вы не можете напрямую работать с этим с сервера.

Однако вы можете:

1) Изменить HTML-код, отправляемый сервером (посмотрите express.render)

2) Запустите клиентский скрипт, который открывает соединение с сервером (websockets, AJAX) и затем изменяет DOM там, когда сервер что-то отправляет.

0 голосов
/ 16 сентября 2018

Как правило, если вы хотите манипулировать внешним видом DOM на стороне сервера, вам потребуется отрисовать всю страницу на стороне сервера, а затем отправить ее на внешний интерфейс.

Если вы хотите просто манипулировать DOM после получения запроса во внешнем интерфейсе, это довольно обычная практика для такого типа вещей; независимо от используемого языка (-ов) вы можете:

  • Отправить форму
  • Сообщите пользователю, что форма отправляется на сервер (Best Practice for 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) на сервере, а затем перезагружать страницу, вы можете сделать то же самое - или просто создать новую страницу, которую вы хотите отправить на серверную часть, а затем перенаправить их оттуда.

Надеюсь, это поможет!

...