如何在没有页面重定向或表单刷新的情况下在节点 js 上发送 post 请求。没有防止违约

Question

我有一个到达此端点的 HTML 表单。 它发送数据，但我不希望页面在发送数据后刷新。 这可能吗？

我不确定最好的解决方案是什么，nodejs 中没有 preventdefault，但我不想重定向/刷新同一页面

const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");

const app = express();


app.use(bodyParser.urlencoded({ extended: true }))
app.use(express.static("public"));

const PORT = process.env.PORT || 5001;

app.get("/", (req, res) => {
  res.sendFile("index.html", { root: __dirname });
});

app.post("/rumi", (req, res) => {
  console.log(res.req.body);

  res.json({ status: "ok" });


});

app.get("/rumi", (req, res) => {
  res.sendFile("index2.html", { root: __dirname });
});

app.listen(PORT, () => {
  console.log(`app running on port ${PORT}`);
});

这是 html ：

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport"
        content="initial-scale=1.0, user-scalable=no" />
  <meta charset="UTF-8" />
  <title>Drawing Tools</title>

  <style type="text/css">
    #map,
    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
    }

    #panel {
      width: 200px;
      font-family: Arial, sans-serif;
      font-size: 13px;
      float: right;
      margin: 10px;
    }

    #color-palette {
      clear: both;
    }

    .color-button {
      width: 14px;
      height: 14px;
      font-size: 0;
      margin: 2px;
      float: left;
      cursor: pointer;
    }

    #delete-button {
      margin-top: 5px;
    }
  </style>

  <script src="/js/script.js"></script>

  <script>
    function submitRumiForm(e) {
      e.preventDefault();
      var formData = new FormData(document.getElementById("rumiForm"));
      var options = {
        body: formData,
        method: "POST"
      }
      fetch("/rumi", options).then(function(data) {
        console.log("post successful");
      }).catch(function(err) {
        console.log(err);
      })
    }

    var el = document.getElementById("stair-button")
    if (el) {
      el.addEventListener("click", submitRumiForm);
    }
  </script>
</head>

<body>
  <div id="panel">
    <div id="color-palette"></div>
    <div>
      <button id="delete-button">Delete Selected Shape</button>
      <button id="delete-all-button">Delete All Shapes</button>
    </div>
    <form id="rumiForm"
          action="/rumi"
          method="POST">
      <div>
        <h3>Elements</h3>
      </div>
      <button type="submit"
              name="stairs"
              value="clicked"
              id="stair-button"
              onclick="console.log('hi')">
        <img src="./images/stair.png" />
      </button>
      <button type="submit"
              name="ramp"
              value="clicked"
              id="ramp-button">
        <img src="./images/ramp.png" />
      </button>
      <button type="submit"
              name="exit"
              value="clicked"
              id="exit-button"><img src="./images/exit.png" /></button>
      <button type="submit"
              name="narrow"
              value="clicked"
              id="narrow-button">
        <img src="./images/narrow.png" />
      </button>
      <button type="submit"
              name="wide"
              value="clicked"
              id="wide-button"><img src="./images/wide.png" /></button>
      <button type="submit"
              name="construction"
              value="clicked"
              id="construction-button">
        <img src="./images/construction.png" />
      </button>
    </form>
  </div>
  <div id="map"></div>
</body>

</html>

我有一个到达此端点的 HTML 表单。 它发送数据，但我不希望页面在发送数据后刷新。 这可能吗？

我不确定最好的解决方案是什么，nodejs 中没有 preventdefault，但我不想重定向/刷新同一页面

当我尝试解决方案时会发生这种情况

这会在一段时间后发生

Answer 1

由于这是浏览器特定的行为，因此必须在客户端通过 JavaScript 完成并在表单中使用 prevent default ，请参见此处。

如果您只是不想刷新到该特定页面，您可以在 express 中进行重定向，因此在他们提交表单后，他们会被引导离开该页面，请参阅此处。

Answer 2

如果您不想重新加载页面，那么您需要使用 Ajax 调用从浏览器发送带有 Javascript 的 POST，而不是让浏览器自动发布表单。 每当浏览器自动发布表单时，它都会在浏览器窗口中显示表单响应。 因此，如果您不希望那样，您必须控制（在浏览器中）并使用您自己的 Javascript 提交表单，以便您可以控制结果发生的情况。

向表单添加标识符：

<form id="rumiForm" action="/rumi" method="POST">

在 HTML 中的表单之后添加此脚本：

<script>

function submitRumiForm(e) {
   e.preventDefault();
   var formData = new FormData(document.getElementById("rumiForm"));
   var options = {body: formData, method: "POST"}
   fetch("/rumi", options).then(function(response) {
       return response.json();
   }).then(function(data) {
       // have the JSON response from the POST operation here
       console.log(data);
   }).catch(function(err) {
       console.log(err);
   })
}

document.getElementById("stair-button").addEventListener("click", submitRumiForm);

</script>

从此更改此表单项：

  <button type="submit"
          name="stairs"
          value="clicked"
          id="stair-button"
          onclick="console.log('hi')">

对此：

  <button type="submit"
          name="stairs"
          value="clicked"
          id="stair-button"
  >

如何在没有页面重定向或表单刷新的情况下在节点 js 上发送 post 请求。没有防止违约

问题描述

2 个解决方案

解决方案1
0 2019-11-27 01:57:18

解决方案2
0 2019-11-27 01:59:57

如何在没有页面重定向或表单刷新的情况下在节点 js 上发送 post 请求。 没有防止违约

问题描述

2 个解决方案

解决方案1 0 2019-11-27 01:57:18

解决方案2 0 2019-11-27 01:59:57

如何在没有页面重定向或表单刷新的情况下在节点 js 上发送 post 请求。没有防止违约

解决方案1
0 2019-11-27 01:57:18

解决方案2
0 2019-11-27 01:59:57