单击html5中的按钮/链接时如何将一个页面导航到另一个页面

Question

我在html页面中有一个链接/按钮。 当我点击按钮时，我必须将另一个页面数据填充为当前页面中的模型弹出窗口。 我使用bootstrap模型进行弹出。 如果没有呼叫服务器来导航页面并且没有jquery /任何服务器端技术，这是否可行。 我需要使用简单的java脚本来执行此操作。

Answer 1

如果要使用信息填充模态，并且希望此信息保持不变（不仅仅是在其上附加HTML）。 是的，您需要以某种方式与服务器通信，以便更新您的内容。

实际上，在没有与服务器通信的情况下，无法在给定用户操作的情况下填充持久性内容 。 （即你刷新页面，它仍然在那里看）

由于您询问了HTML5解决方案，因此我们提供了Fetch API。 Fetch被设计为比XMLHttpRequest更容易和更广泛。 引用MDN：

Fetch API提供了一个用于获取资源的接口（例如，通过网络。）对于使用XMLHttpRequest的人来说，这似乎很熟悉，但新API提供了更强大，更灵活的功能集。

我的猜测是你要在你的模态上发布信息。 假设您要将表单数据发送到模态：您将要使用以下内容：

fetch('http://your-website-goes-here.com/submit-data', {
  method: 'post',
  body: JSON.stringify({
    name: document.getElementById('name').value
    email: document.getElementById('email').value
    message: document.getElementById('message').value
  })
})

请注意，并非所有浏览器都支持使用ES6 承诺的 Fetch。 没有什么好的polyfill不会解决。 关于它的更多信息我可以使用。 请参阅获取和承诺支持。

有关Fetch的更多信息，我建议如下：

• https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
• https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
• https://davidwalsh.name/fetch