Loading at the bottom of the page using Django + ajax

Source: Internet
Author: User

Loading at the bottom of the page using Django + ajax
Loading at the bottom of the page using Django + ajax

Requirement: display the image. When the scroll bar is dragged to the bottom of the page, some pictures are loaded. Q: The display of photo uses django's QuerySet. It is a headache for ajax loading. I also made up js. Solution: Use the clever method to paging photo first, and then load the photo part of the next page to the current page using the ajax load method.

The first step is to display the QuerySet page of photo. I will use the url of 8000/x/here, so write it in urls. py.

Url (R' ^ (? P
D +)/$ ', index, name = 'page '),

The number of loads on each page has been changed several times, and the final decision is smaller than 5. Therefore, we need to split the QuerySet Based on the page to obtain the corresponding image. However, QuerySet cannot be sorted, first convert the list into a list and then slice it.
Views. py

def index(request,page=0):    if request.method=='POST':        ...    else:        photos=list(Photo.objects.filter(is_show=True).order_by('-id'))[int(page)*5:(int(page)+1)*5]        return render_to_response('index.html',RequestContext(request,{'photos':photos}))

In this way, only five images are displayed on each page.

Bottom loading

Generally, the code structure for sliding the page to the bottom is similar to this:

$ (Window ). scroll (function () {var scrollTop = $ (this ). scrollTop (); // The distance from the scroll bar to var scrollHeight = $ (document ). height (); // The height of the entire html page var returns wheight = $ (this ). height (); // The height of the visible page if (scrollTop + windowHeight = scrollHeight) {// do something }});

Here I stopped and thought about it again. To get the image of the next page, first I need to know the url of the next page, and the loading itself occurs on the home page, that is, if there is no/x/, it is necessary to handle the problem.

Var url = window. location. href; // obtain the current page Link var cuts = url. split ('/'); // separate to obtain the page number if (cuts. length <5) {var cur_page_num = 1;} else {var cur_page_num = parseInt (cuts [3]);}

In addition, you need to add the page number cyclically during the drag process.
Next, use the ajax load method to obtain the corresponding div, but the load method must be loaded into a container. Therefore, you must first create a container to load the newly loaded, if it is directly loaded into the original div, it will overwrite the previous photo.
All photo files are packed in a large container.

{% block content %} {% endblock %}  

Each small photo div in the block


To avoid overwriting the previous content each time, you must create a container and separate it with a unique identifier from other containers.
Therefore, write in js as follows:

If (scrollTop + fig = scrollHeight) {var nexturl = cuts [0] + '//' + cuts [1] + cuts [2] + '/' + String (cur_page_num + 1) + '/'; // url cur_page_num + = 1 For splicing the next page; // auto-increment 1 // alert (cur_page_num); var newnode = document. createElement (div); newnode. setAttribute (class, container-fluid grid); newnode. setAttribute (id, new + String (cur_page_num); document. body. appendChild (newnode); $ ('# new' + String (cur_page_num )). load (nexturl + '. grid-item ');}

Each time the slide is dragged to the bottom, the page number is automatically added with 1, which avoids loading only the next page. The newly created div also hasClass = 'iner iner-fluid grid', And keep the style consistent with the previous one. Add anotherId = new + page number, Load the container to the new container by using the load method.
So far, the entire loading process is basically implemented.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.