javascript - jQueryAjax Load external page into content div - Stack Overflow

admin管理员组

文章数量:1425677

I have a website that i wan't to load external html content into my index.html <div id="content"> without having to refresh the page. I manage to do this with jQuery load() function. When i read up on load() and ajax(), it has e to my understanding that ajax is a more configurable function then load, but do basically the same thing (correct me if im wrong*). When I use load() the external content loads but the url address doesn't show the current page. Therefore I want to ask if someone out there can show me how i can:

• Make the ajax() function behave like load().

• Show dynamically and fetch href in url for bookmark etc.

Ajax() code example:

Load() code example:

Questions? ask!

Thanks beforehand!

/E.

I have a website that i wan't to load external html content into my index.html <div id="content"> without having to refresh the page. I manage to do this with jQuery load() function. When i read up on load() and ajax(), it has e to my understanding that ajax is a more configurable function then load, but do basically the same thing (correct me if im wrong*). When I use load() the external content loads but the url address doesn't show the current page. Therefore I want to ask if someone out there can show me how i can:

• Make the ajax() function behave like load().

• Show dynamically and fetch href in url for bookmark etc.

Ajax() code example: https://plnkr.co/edit/ReSdd5U6dOYbQxctzvk7?p=preview

Load() code example: https://plnkr.co/edit/gpsZbOip0VtO7iXTPaM2?p=preview

Questions? ask!

Thanks beforehand!

/E.

• javascript
• jquery
• ajax
• load

Share Improve this question Follow asked Aug 12, 2016 at 13:18 Erik WahlströmErik Wahlström 1922 silver badges66 bronze badges 2

• If I follow your question, then I think what you are looking for is jQuery load() and the browser History_API. Check out : developer.mozilla/en-US/docs/Web/API/History_API – JonSG Commented Aug 12, 2016 at 13:35
• Take a look at jquery.fn.load source: james.padolsey./jquery/#v=1.11.2&fn=jQuery.fn.load You will understand how you can make ajax() function behave like load() – Radian Jheng Commented Aug 12, 2016 at 13:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

As I understand it, you are looking to use jQuery load() or an equivalent AND have the browser history (address bar) update to reflect the url of the just loaded content.

Since you suggest that you have load() working, then what you are after is the browser History_API, specifically pushState().

You can read more about the : History_API

You can also read about the : pushState() method

Based on your load() example, I think you can extend it with the following to get what you are after:

$('#content').load('link1.html');
$('a').click(function(e){
  var page = $(this).attr('href');
  $('#content').load(page + '.html');

  var stateObj = {loaded : page};
  history.pushState(stateObj, "page title", page + '.html');

  return false; // don't follow the link
});

You can also see Mozilla's AJAX based navigation example that does what I think you are looking to do via AJAX rather than jQuery and uses pushstate.

You may do something like:

$('#btn1').click(function(e){
   var href = this.href;  // get href from link

   $.ajax({
       url: href,
       type: 'GET',
       dataType: 'html',
       success: function(data){
         $('#content').html(data);
       }
   });

   return false; // don't follow the link

});

None of those options/functions will update the URL shown by the browser... they just load and show the content of the page you requested to the current one.

For history purpose what you could do is to use the native "history API" as explained here, but still, no URL update...

本文标签： javascriptjQueryAjax Load external page into content divStack Overflow