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

我在html页面中有一个链接/按钮。当我点击按钮时，我必须在当前页面中填充另一个页面数据作为模型弹出窗口。我使用bootstrap模型弹出。这可能没有呼叫服务器浏览页面，并没有jQuery /任何服务器端技术。我需要使用简单的Java脚本来做到这一点。如何在html5中点击按钮/链接时将一个页面导航到另一个页面

来源

2016-09-22 Ravikanth

您可以使用Ajax来获取其他页面。没有jQuery，你将需要使用XMLHttpRequest对象。 – jcubic

@jcubic： - 这是可能的与简单的JavaScript而不是Ajax/jQuery的？我在另一个页面中有一个模型弹出窗口。当我点击主页面中的链接时，模型弹出窗口必须在页面中可见。 – Ravikanth

你可以尝试使用iframe，把你的其他页面放在iframe和iframe里面，然后用boostrap弹出。 – jcubic

如果你想用信息填充你的模态，并且你希望这些信息能够持久存在（而不仅仅是附加HTML）。是的，您需要以某种方式与服务器通信，以便更新您的内容。

其实有没有办法来填充持续的内容，给用户操作，而无需说话与服务器。（即刷新页面并仍然在那里查看）

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

的提取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 promises。没有什么好的polyfill不会解决。更多关于它我可以使用。请参阅Fetch和Promise支持。

有关获取进一步的信息，我想提出以下建议：

来源

2016-09-22 15:46:14

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

回答

相关问题