具有基于类的视图的Ajax分页

Question

我正在尝试在我的应用程序上应用带有分页的ajax。使用基于类的Listview

#views.py
class HomePage(ListView):
model = Video
template_name = 'index.html'

def get_context_data(self, **kwargs):
context = super(HomePage, self).get_context_data(**kwargs)
videos = Video.objects.filter(category='sub')
paginator = Paginator(videos, 5)
page = self.request.GET.get('page2')
try:
videos = paginator.page(page)
except PageNotAnInteger:
videos = paginator.page(1)
except EmptyPage:
videos = paginator.page(paginator.num_pages)
context['videos'] = videos
if self.request.is_ajax():
html = render_to_string('videos/index.html', context, request=self.request)
print(html)
return JsonResponse({'form' : html })

主页模板脚本

<script type="text/javascript">
$(document).ready(function(event){
$(document).on('click', '.page-link', function(event){
event.preventDefault();
var page = $(this).attr('href');
console.log(page)
$.ajax({
type: 'GET',
url: ,
data: {'page':'{{ page.number }}'},
dataType: 'json',
success: function(response){
$('#ajax_page_template').html(response['form'])
console.log("success")

},
error: function(rs, e){
console.log(rs.responseText);
},
});
});
});
</script>

1.当前错误在视图中.pylocal variable 'html' referenced before assignment

2.我应该在ajax中放什么？url:我试图放url:page，但它将url返回到127.0.0.1:8000/?page=2/?page=2.

Answer 1

我遇到了同样的问题，并使其正常工作：

在views.py中添加"；paginate_by＝4"；和def get_template_names:

class HomePage(ListView):
...
paginate_by = 4
def get_template_names(self):
template_name = 'list.html'
if self.request.is_ajax():
template_name = 'list_ajax.html'
return template_name

使用2个模板：

带有for循环的新list_ajax.html：

{% for video in video_list %}
...
{% endfor %}

现有模板列表.html：

<div id="image-list">
{% include 'list_ajax.html' %}
</div>

脚本中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js"></script>
<script>
var csrftoken = Cookies.get('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
$(document).ready(function(){
var page = 1;
var empty_page = false;
var block_request = false;
var num_pages=parseInt('{{ page_obj.paginator.num_pages }}')
$(window).scroll(function() {
var margin = $(document).height() - $(window).height() - 200;
if  ($(window).scrollTop() > margin && empty_page == false &&
block_request == false) {
block_request = true;
page += 1;
if(num_pages-page >= 0) {
$.get('?page=' + page, function(data) {
block_request = false;
console.log(data)
$('#image-list').append(data);
}
);
}}
});
});
</script>

Answer 2

在使用html变量之前，您必须声明它

html = ""
if self.request.is_ajax():
html = render_to_string('videos/index.html', context, request=self.request)

您应该放在ajax调用中的url是与相关视图(HomePage(相对应的那个。

并更改以下行：

return JsonResponse({'form' : html })

收件人：

render(request,'videos/index.html',JsonResponse(html))