Django 在同一个模板上渲染答案

【问题标题】：Django render on the same templateDjango 在同一个模板上渲染
【发布时间】：2017-08-06 04:28:04
【问题描述】：

我尝试创建一个分页，所以我使用了几行 JS 来发送数据，我正确地捕捉到了它（并且可以在控制台中打印它）并且我看到它们不同但我的渲染永远不会改变。

Console.log：

[15/Mar/2017 14:30:09] "POST /index/ HTTP/1.1" 200 15320
[POST] 2
[15/Mar/2017 14:30:10] "POST /index/ HTTP/1.1" 200 9003
[POST] 3
[15/Mar/2017 14:30:10] "POST /index/ HTTP/1.1" 200 9003
[POST] 4
[15/Mar/2017 14:30:16] "POST /index/ HTTP/1.1" 200 9003
[POST] 1

模板.html：

<p> THIS IS THE PAGE {{ page }} </p>

<div class="col-xs-12 center">
  <ul class="pagination" >
    <li><a href="#" value={{ page|add:"-1" }}>&laquo;</a></li>
    <li><a href="#" value=0>1</a></li>
    <li><a href="#" value=1>2</a></li>
    <li><a href="#" value=2>3</a></li>
    <li><a href="#" value=3>4</a></li>
    <li><a href="#" value=4>5</a></li>
    <li><a href="#" value={{ page|add:"1" }}>&raquo;</a></li>
  </ul>
</div>

<script language="javascript">
    $('ul.pagination li a').on('click', function(e){
        e.preventDefault();
        $.ajax({
            url: '/index/',
            type: 'POST',
            headers: {'X-CSRFToken': '{{ csrf_token }}'},
            data: {'page': $(this).attr('value')},
            contentType: 'application/x-www-form-urlencoded; charset=utf-8',
            processData: true,       
        });
    })
</script>

Views.py:

def index(request):
    print("[POST]",request.POST.get('page'))
    page = int(request.POST.get('page', 0)) 
    return render(request, "site/index.html",
                         {'page': page})

所以我想如果我在/index/ 上，我不能用新变量重新渲染索引（也不能用这个变量重新渲染）？

你知道我什么时候可以做到吗？

编辑：我添加控制台日志证明我用 JS 捕获了page 的值。

【问题讨论】：

你能试试Django内置的Paginator类吗？您不需要 javascript 代码，但每次更改页面时它都会刷新页面。 docs.djangoproject.com/en/1.10/topics/pagination
这是个好方法，但我真的想重写或覆盖同一页。

标签： ajax django django-templates django-views python-3.6

【解决方案1】：

要打印已经被 Django 渲染引擎格式化为 HTML 的页面，请使用 ajax 中的函数来覆盖当前页面：$("html").html(response);，因此只需调整 javascript 部分。

<script language="javascript">
    $('ul.pagination li a').on('click', function(e){
        e.preventDefault();
        $.ajax({
            url: '/index/',
            type: 'POST',
            headers: {'X-CSRFToken': '{{ csrf_token }}'},
            data: {'page': $(this).attr('value')},
            'success': function(response)
            {
                $("body").html(response);
            }      
        });
   })
</script>

【讨论】：