如何导航一个页面到另一个页面时，点击按钮/链接在html5

how to navigate one page to another page when click on button/link in html5

本文关键字：按钮 链接 html5 另一个 导航 一个 何导航      更新时间：2023-09-26

我有一个链接/按钮在html页面。当我单击按钮时，我必须填充另一个页面数据作为当前页面中的模型弹出。我使用bootstrap模型弹出。如果没有调用服务器来导航页面，没有jquery/任何服务器端技术，这是可能的吗?我需要使用简单的java脚本来做到这一点。

如果您想用信息填充您的模态，并且您希望这些信息持久存在(而不仅仅是在其上附加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
  })
})

注意，并不是所有的浏览器都支持Fetch，它使用ES6的承诺。好的填充物都能解决。更多信息请访问Can I Use。参见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
相关文章：