对不同 HTML 页面的 GET 请求答案

【问题标题】：GET request to a different HTML page对不同 HTML 页面的 GET 请求
【发布时间】：2020-01-11 16:34:56
【问题描述】：

我正在使用 HTML、JQuery 和 NodeJS。我的问题是我正在尝试将 index.html 中的表单发布到 Node、进程（数据库等）、使用 JSON 响应 JQuery 并重定向。所以我想处理 json 响应并在不同的 HTML 页面（board.html）上查看它。

为此，我试图在两个 HTML 页面（index.html、board.html）上包含相同的 JS 文件，我从有效的索引发布数据，但在重定向到 board.html 之后，JS 不会加载board.html 上的内容：

我试过了

window.location.replace("/views/board.html");
$('#b-content').append("content...").after('topic: '+res.topic);

//index.js
$(document).ready(function() {
  console.log("READY!")
  $("form").submit(function(e) {
    $(this).attr('action', 'api/board/:b')
      $.ajax({
        url: '/api/board/:b',
        type: 'post',
        dataType: 'json',
        data: $('#main-form').serialize(),
        success: function(res) {
          window.location.replace("/views/board.html");
          $('#b-content').append("content...").after('topic: '+res.topic);
          $('#responses').append("topic: <h3>" + res.topic + "</h3>");
        }
      });
      // e.preventDefault();
  });
});

// 后端

  app.route('/api/board/:b')
  .post(function(req, res) {
    compiledObject = {
      board: req.body.board,
      user: req.body.name,
      topic: req.body.topic,
      thread: req.body.thread
    };
    res.json(compiledObject);
  })

// index.html 示例

  <body>
    <header>
      <h1>
        Anon Message Board
      </h1>
    </header>
    <div id="form-div">
      <form id="main-form" method="post" action="">
        username:
        <input type="text" placeholder="coolname" name="name"/><br>
        <label for="general">General</label>
        <input type="radio" name="topic" value="general"></span>
        <label for="tech">Tech</label>
        <input type="radio" name="topic" value="tech"><br>
        board:
        <input type="text" name="board" /><br>
        message:
        <textarea name="thread" ></textarea><br><br>
        <input type="submit" value="submit"/>
      </form>
    </div>
    <div id="responses">
      <p id="res-name"></p>
    </div>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript" src="views/index.js"></script>
  </body>

// board.html 示例

  <body>
    <h1>Board:</h1>
    <div id="b-content">
      <p>content ...</p>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="/views/index.js"></script>
  </body>
....

我可以加载 board.html，但无法加载附加的元素。

【问题讨论】：

如果你重定向你不能对 DOM 做任何事情。所以替换后的行是没用的。您也没有取消表单提交。

标签： javascript jquery html node.js

【解决方案1】：

一旦触发：

window.location.replace("/views/board.html");

您正在从您的服务器请求一个新页面，因此您在索引页面上所做的所有逻辑都消失了。在重定向之前，您需要将从索引页面收到的数据存储在 LocalStorage 或 cookie 中。

所以你的逻辑应该是这样的

get data
listen for error
if error dont redirect and tell user
if no error, store the data you received, then redirect to new page
load data into your new page

您可能还想考虑一下您的应用到底在做什么以及流程是如何工作的。您是否应该在每次用户发布消息时重定向到新页面？

【讨论】：

好的，谢谢；我之前对网络存储了解不多；这听起来是个好方法。另外，我认为最好为每个 html 页面设置单独的 JS 文件......即使我在两个 html 页面上都包含了脚本，我也无法从 index.js 控制两个页面

【解决方案2】：

您正在寻找的预期功能是所谓的状态管理。您希望一个页面改变另一个页面的状态。如果我是你，我会使用浏览器的 localStorage 来保存你在路由之前检索到的数据，特别是如果你没有使用支持状态管理的框架/插件。

【讨论】：

谢谢，这很有帮助我对本地网络存储了解不多。