Отправить данные из NodeJS обратно на ту же HTML-страницу после отправки формы

Question

На HTML-странице под названием "history.html" у меня есть форма с методом POST, которую я отправляю на сервер NodeJS для выполнения некоторых операций.

<form action="/history/find" method="POST">

some form stuff

</form>

Это код на сервере, который получает форму и выполняет некоторые операции:

router.post("/history/find", function (req, res) {

    var fechaInicial = req.body.fechaInicial;
    var fechaFinal = req.body.fechaFinal;
    var contaminante = req.body.contaminante;

    Comment.find(
        {
            "data.time.s": {
                "$gte": fechaInicial,
                "$lte": fechaFinal
            }
        },
        {
            [contaminante]: 1,
            "data.time.s": 1,
            "_id": 0
        }, function (error, datos) {

            res.send(datos);

        });

});

Результирующий вывод этой конкретной операции Find представляет собой набор многих объектов JSON (они не заключены в квадратные скобки, как в массиве), в этом примере я просто поместил 2 из них:

    {
        "data": {
            "iaqi": {
                "co": {
                    "v": 3.2
                }
            },
            "time": {
                "s": "2019-05-14 12:00:00"
            }
        }
    },
    {
        "data": {
            "iaqi": {
                "co": {
                    "v": 4.8
                }
            },
            "time": {
                "s": "2019-05-15 00:00:00"
            }
        }
    }

Мне нужно как-то отправить обратно переменную datos , содержащую приведенный выше результат, обратно в тот же HTML-код, куда я отправил форму.

Если я использую res.send (datos) , то я получаю только данные, представленные в браузере. Мне нужно вернуться на HTML-страницу, но иметь переменную, доступную для ее использования и выполнения других операций непосредственно на странице.

Я искал в интернете безуспешно, как это сделать.
Большое спасибо всем, кто может мне помочь с этим.

Answer 1

Вы не можете отправлять данные на страницу HTML. HTML является статическим форматом файла и не может получать данные самостоятельно.Сервер может, но не файл HTML.

Однако вы можете перехватить ваш почтовый запрос на стороне клиента, отправить его клиенту с помощью XHR и получить обратно данные.снова на стороне клиента, затем делайте что хотите, когда скрипт получает datos.В основном все происходит между частью страницы JavaScript и сервером Node, который получает данные POST и отправляет обратно datos.

Вот простой пример того, как вы можете перехватить запрос POST на стороне клиента:

document.querySelector('form').onsubmit = evt => {

  // don't submit the form via the default HTTP redirect
  evt.preventDefault();
  
  // get the form values
  const formData = {
    name1: document.querySelector('input[name=name1]').value,
    name2: document.querySelector('input[name=name2]').value
  }
  console.log('formData:', formData);
  
  // send the form encoded in JSON to your server
  fetch('https://your-domain.com/path/to/api', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(formData),
  })
  
  // receive datos from the server
  .then(resp => resp.json())
  .then(datos => {/* do what you want here */})
  
  // catch potential errors
  .catch(err => console.log('an error happened: '+err));
  
}

<form>
  <input name="name1" value="value1">
  <input name="name2" value="value2">
  <button type="submit">Submit</button>
</form>

PS: приведенный выше фрагмент не удастся из-за сетевой ошибки, поскольку присутствует только сценарий на стороне клиента - на https://your-domain.com/path/to/api ничего не работает, но выуже включил правильный код сервера в ваш вопрос.Просто завершите серверный скрипт на res.send(datos).