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

Question

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

Answer 1

如果你想用信息填充你的模态，并且你希望这些信息持久化(而不只是在其上附加 HTML)。是的，您需要以某种方式与服务器通信，以便它可以更新您的内容。

实际上，如果不与服务器对话，就无法根据用户操作填充持久内容。 (即你刷新页面，它仍然在那里可以看到)

既然您询问了 HTML5 解决方案，我们就有了 Fetch API。 Fetch 被设计成比 XMLHttpRequest 更容易和更广泛。引用 MDN:

The Fetch API provides an interface for fetching resources (e.g., across the network.) It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set.

我的猜测是您想在您的模式上发布信息。假设你想发送一个表单数据到你的模式:你会想使用这样的东西:

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 promises .没什么好polyfill不会解决。更多关于我可以使用的信息。参见 Fetch和 Promise支持。

有关 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