Question

在一个名为“ history.html”的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对象（它们没有像Array中那样被方括号包围），在此示例中，我只放入了其中两个：

    {
        "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部分和接收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)结束服务器脚本即可。

表单提交后将来自NodeJS的数据发送回相同的html页面

1 个答案: