Django 在同一模板上呈现

Django render on the same template

我尝试创建一个分页,所以我使用一些 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

Template.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 渲染引擎在 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>