單擊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