DjangoのテンプレートがAJAXのリクエストを成功させると再レンダリングされない

Question

私は非常に単純なAJAXコードを書いてgetリクエストを行い、djangoのテンプレート値をレスポンスとして期待しています。このAjaxコードをネットワーク上のchromeで実行しようとすると、Getリクエストが成功し、ネットワーク下のプレビューセクションで、私が期待していたテンプレート値を見ることができますが、Webページは同じままです。再びレンダリングされる。

マイビュー：

def test(request,id=1): 
    return render(request,'test.html',{'num':id,'next':9}) 

マイテンプレートとAjaxコード：

<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script> 
<p>{{num}}</p> 
<button onclick='test({{next}})'>Test</button> 

<script> 
function test(next){ 
    $.ajax({ 
     url:'/test/'+next, 
     type: 'GET', 
     success: function(){ 
      console.log('done'); 
     } 
    }); 
} 
</script> 

私は '/テスト/ 66' で始めたとき、私のこの問題のサンプル画像を確認してくださいは、上のクリックを作りましたボタンは、必要な応答を持って、まだ変化はありません。

Answer 1

サーバーサイドレンダリング（DTL）とクライアントサイド（javascript）を混在させています。テンプレートをレンダリングすると、djangoは、{{text}}のように、サーバーサイド変数へのアクセスがJavaScriptにはありません。

あなたが行う必要があります：SSR

前

テンプレートを

<div id="content"> 
    <p>{{num}}</p> 
    <button onclick='test({{next}})'>Test</button> 
</div> 

<script> 
    function test(next){ 
     $.ajax({ 
      url:'/test/'+next, 
      type: 'GET', 
      success: function(data){ 
       document.querySelector('#content p').innerHTML(data); 
      } 
     }); 
    } 
    </script> 

SSR後のテンプレート（このような何か、あなたはポイントを得る）

<div id="content"> 
    <p>66</p> 
    <button onclick='test(66)'>Test</button> 
</div> 

<script> 
function test(next){ 
    $.ajax({ 
     url:'/test/'+next, 
     type: 'GET', 
     success: function(data){ 
      document.querySelector('#content p').innerHTML(data) 
     } 
    }); 
} 
</script> 

Answer 2

ajax応答はページリフレッシュにつながりません。なぜなら、それはまさにajax呼び出しがすべてであるからです。