How to load content via ajax in the social networks?

How to load content when you scroll in vk.com, instagram.com.
First, the default download from the base 9 of the records, then when you scroll I want to load 9 more
Views:
def IndexAjaxLoadNews(request):
 if request.is_ajax():
 startFrom = request.GET.get("startFrom")
 data = serializers.serialize('articles', News.objects.all().order_by('-dat','-addtime')[0:startFrom])
 return HttpResponse(data, content_type='application/json')
else:
 return render(request, 'news.html')

Script:
the <script>
$(document).ready(function(){
/* Variable-flag to track if there is currently an ajax request. In the beginning, give it the value false, i.e. the request is not in progress */
var inProgress = false;
/* Which article to do a sample from a database with ajax request */
var startFrom = 9;
 /* Use $('#more').click(function() in order to give the user the ability to control the process by clicking on the "Next" button, under the block of articles (see file index.php) */
$(window).scroll(function(){
 /* If the window height + the height of the scroll is greater than or equal to the height of the entire document and the ajax request in not currently running, then run an ajax request */
 if($(window).scrollTop() + $(window).height() >= $(document).height() - 200 && !inProgress) {
$.ajax({
 /* address of file-request handler */
 url: '/ajax/loadnews/',
 /* method for sending data */
 method: 'GET',
 /* data that we pass the file handler */
 data: {"startFrom" : startFrom},
 /* what you need to do before sending sapra */
 beforeSend: function() {
 /* change the flag value to true, i.e., the inquiry now in progress */
 inProgress = true;}
 /* what to do upon completion of request */
}).done(function(data){
 /* Convert the result come from the processor - convert json string back into an array */
 data = jQuery.parseJSON(data);
 /* If the array is not empty (i.e. the article is there) */
 if (data.length > 0) {
 /* Make a pass on each result, okazavshegosya in the array
 where in the index gets the index of the current element of the array, and the data - the article itself */
 $.each(data, function(index, data){
 /* Select the ID block with articles and disapointed its new data */
 $("#articles").append("<p><b>" + data.themename + "</b><br />" + data.themename + "</p>");
});
 /* Upon completion of the request again to change the value of flag to false */
 inProgress = false;
 // Increment the 10 sequential number of the article with which it is necessary to begin the selection from the database
 startFrom += 9;
}});
}
});
});
</script>

Templates:
<div class="row" id="articles">
{% block news %} {% endblock news %}
</div>

Url:
path('ajax/loadnews/', views.IndexAjaxLoadNews),
March 19th 20 at 09:03
0 answer

Find more questions by tags Django