Django模板不对成功的AJAX get请求重新呈现。

Question

我编写了一个非常简单的ajax代码，它发出一个get请求，它期望django模板值作为响应。因此，当我尝试执行这个ajax代码时，在网络下的chrome中，我可以看到get请求是成功的，在网络下的预览部分，我可以看到我所期望的模板值，但是网页保持不变，不会再次呈现。

我的看法是：

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>

当我开始使用'/test/66‘时，请检查我的问题的这个示例图像，点击按钮，得到所需的响应，仍然没有改变。

​

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>