Djangoは同じテンプレートでレンダリングする

Question

ページングを作成しようとするので、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}) 

だから私は、私は考えている場合on /index/私は新しい変数でインデックスの新しいレンダリングを行うことはできません（そしてこの変数で新しいレンダリングもできます）？

私はそれを行うことができますか？

EDIT：コンソールログを追加すると、私はpageの値をJSで捕まえることができます。

Answer 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>