根据 jQuery 发起的 AJAX POST 请求重新渲染 Django 视图

Question

我面临的问题与根据由 jQuery 发起的 AJAX post 请求更新的上下文重新呈现 Django 视图有关。我之所以需要一个AJAX请求是因为我需要在不刷新页面的情况下修改页面UI，这对我要构建的东西很关键。

到目前为止，我能够触发 AJAX post 对应该发生更新的同一页面的 URL 的请求，以及 Django view.py 充分注册它已被调用。 然而，虽然我可以重现更新 Django 视图上下文的能力，但该视图似乎不会根据更新的上下文重新呈现更新的 HTML。

的帖子似乎准确描述了我的问题。该线程的最高投票解决方案是有一个条件，仅在 AJAX 调用仅呈现部分模板（ 而不是 完整 HTML page) - 与要更新的组件相对应的部分模板。这是在下面的代码片段中重现的内容，但 HTML 不会根据更新的上下文进行更改。

附件是用于简单尝试的相关代码片段，其中页面默认显示 <h1>2<h1/>，并且当我们单击 window 上的任意位置时将更新为 5。单击 window 上的任意位置会触发 AJAX 调用，但页面不会更新为 <h1>5<h1/>。

view.py

def index(request):
    context = {"num": 2}
    if (request.method == "POST"):
        print("View hit due to AJAX call!") # // THIS CAN BE TRIGGERED ADEQUATELY!
        context["num"] = 5
        return render(request, 'num.html', context)
    return render(request, 'override.html', context)

override.html

{% load static %}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="{% static 'js/num.js' %}" defer></script>
        <title>Title</title>
    </head>
    <body class="">
    <div class="">
        {% include 'num.html' %}
    </div>

    </body>
</html>

num.html

<h1>{{ num }}</h1>

num.js

var postUrl = "http://localhost:8000/";

function getCSRFToken() {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            if (cookie.substring(0, 10) == ('csrftoken' + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(10));
                break;
            }
        }
    }
    return cookieValue;
}

$('html').click(function(){
    values = [1, 2];
    var jsonText = JSON.stringify(values);
    $.ajax({
        url: postUrl,
        headers: { "X-CSRFToken": getCSRFToken(), "X-Requested-With": "XMLHttpRequest" },
        type: 'POST',
        data: jsonText, // note the data, jsonText, does not really matter. The Django context gets updated to 5 instead of 2. 
        traditional: true,
        dataType: 'html',
        success: function(result){
            console.log("AJAX successful") // THIS CAN BE TRIGGERED ADEQUATELY!
        }
    });
});

Answer 1

如果这部分代码

success: function(result){
            console.log(result)
        }

打印 num.html 的内容你可以更改 num.html 以获取 h1 id 为

num.hml

<h1 id="numberToChange">{{ num }}</h1>

在你的 num.js

$('html').click(function(){
    values = [1, 2];
    var jsonText = JSON.stringify(values);
    $.ajax({
        url: postUrl,
        headers: { "X-CSRFToken": getCSRFToken(), "X-Requested-With": "XMLHttpRequest" },
        type: 'POST',
        data: jsonText, // note the data, jsonText, does not really matter. The Django context gets updated to 5 instead of 2. 
        traditional: true,
        dataType: 'html',
        success: function(result){
            document.getElementById("numberToChange").innerHTML = result}
    });
});

根据 jQuery 发起的 AJAX POST 请求重新渲染 Django 视图

Re-render Django view based on jQuery-initiated AJAX POST request

html

django

ajax

jquery