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

Question

I have a link/button in html page . when i click the button i have to populate another page data as a model popup in the current page. I used bootstrap model for popup . Is this possible without call server to navigate the page and wihtout jquery/any server side technologies. I need to used simple java script to do this.

Answer 1

If you want to populate your modal with information, and you want this information to persist (not just append HTML on it). Yes, you'll need in some manner to communicate with the server so it can update your content.

Actually there's no way to populate persistent content, given a user action, without talking with the server . (ie you refresh the page and its still there to see)

Since you asked an HTML5 solution, we have the Fetch API. Fetch was designed to be easier and broader than XMLHttpRequest. To quote MDN:

The Fetch API provides an interface for fetching resources (eg, 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.

My guess is that you want to post information on your modal. Supposing you want to send a form data to your modal: you'll want to use something like this:

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
  })
})

Notice that not all browsers supports Fetch, which uses ES6 promises . Nothing that a good polyfill wouldn't solve. More about it on Can I Use. See Fetch and Promise support.

For further info about Fetch, I'd recommend the following:

• 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