Fatal编程技术网
  • javascript/
  • Javascript 获取对其他HTML页面的请求

Javascript 获取对其他HTML页面的请求

javascript jquery html node.js

Javascript 获取对其他HTML页面的请求,javascript,jquery,html,node.js,Javascript,Jquery,Html,Node.js,我正在使用HTML、JQuery和NodeJS。我的问题是，我试图将index.html中的表单发布到节点、进程（数据库等），用JSON响应JQuery，并重定向。所以我想处理json响应并在不同的HTML页面（board.HTML）上查看它 为此，我尝试在两个HTML页面（index.HTML，board.HTML）上包含相同的JS文件。我发布了索引中的数据，但重定向到board.HTML后，JS不会加载board.HTML上的内容： 我试过了 window.location.replace(

我正在使用HTML、JQuery和NodeJS。我的问题是，我试图将index.html中的表单发布到节点、进程（数据库等），用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.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>

  <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>
....



Anon留言板
用户名：


一般的
技术人员


董事会：


信息：
//board.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>

  <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，但附加的元素不会加载。

一旦触发：

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
此外，你可能还想知道你的应用程序到底在做什么，以及流程是如何工作的。您是否应该在每次用户发布消息时重定向到新页面？

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

如果你重定向到DOM，你将无法执行任何操作。因此，更换后的线路是无用的。您也不会取消表单提交。是的，谢谢；我以前对网络存储了解不多；这听起来是个好办法。另外，我认为最好为每个html页面提供单独的JS文件。。。我无法从index.js控制这两个页面，尽管我在两个html页面上都包含了脚本，但这很有帮助，因为我对本地web存储了解不多。