如何动态加载外部页面内容

Question

How and what would be the best way to go about dynamically loading page content? (load new content without whole page reload / refresh using div container )

I have a gallery page and want to load only the new gallery content from other pages I will be making in the future. I will be using the pagination bar to load the content. Preferably without hashtags in address bar. I'd appreciate any help. Thanks.

Here is the gallery page I'm working on.

http://www.hlipublishing.com/nmg/index.html

Below are examples of what I'm looking for and caught my attention.

http://www.unheap.com/

Rethinking Dynamic Page Replacing Content and Doc Template from CSS-Tricks.

Answer 1

Try using ajax:

$.ajax({
     url: url,
     data: prameters,
     dataType: "html",
     type: "post"
     success: function(result){
     //append your dynamic image here
      $("#gallery").html(result);
     }
});

On the success part, the result should return the html for your images. Then you're free to append it anywhere on your page. This whole process won't reload your page or add hashtags to your URL(unless you used an <a> tag as trigger to your ajax)

Answer 2

$.ajax() is your answer. Basically, what you want to do is:

1. Write a script that will return JUST the inner data (what goes inside section.portolfio ) for one page. Ideally, you can use a function to check if the call is from AJAX, and return only the inner data for ajax, or the full page for normal requests.
2. Write a .click function for your pager that will grab the page # you want to view (from a rel tag, href tag, pretty much anything)
3. Within the .click function call $.ajax() with the url for your script, the data for the page, and a success function to handle the return (which should accept the returned data in the format you specify. I would guess 'html' . This function should clear out the current content and refill the section with the new content.

As an aside, one problem with your current filtering system is that you only filter the content from the page you're on, meaning you can end up with less than a full page of results even when there are more results. If you expand your function to also accept filter parameters, you can pass both the filter and page in the AJAX request to achieve a nicer user experience.