Django 模板未在成功的 AJAX 获取请求时重新呈现

Question

我编写了一个非常简单的 ajax 代码，它发出一个 get 请求，它期望 django 模板值作为响应。因此，当我尝试在网络下的 chrome 中执行此 ajax 代码时，我可以看到 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>