Django模板不能在成功的AJAX get请求上重新呈现

Question

我编写了一个非常简单的ajax代码来生成get请求，并且它期望django模板值作为响应。因此，当我尝试执行此ajax代码时，在网络下的chrome中，我可以看到get请求成功，并且在网络下的预览部分中，我可以看到我预期的模板值，但网页保持不变，没有＆＃ 39;再次渲染。

我的观点：

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>

当我开始使用＆＃39; / test / 66＆＃39;时，请检查我的问题的示例图像。 ，点击按钮，得到了所需的响应，仍然没有变化。

Answer 1

您正在混合服务器端呈现（DTL）和客户端（javascript）。一旦django呈现模板，您的javascript就无法访问服务器端变量{{text}}。

你必须这样做：

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>