index.html：

Question

我试图将这个问题分解为最简单的例子。如果请求是ajax，则使用更新的上下文呈现页面不会产生预期的结果。

index.html：

<html>
    <body>
        {% if templateVariable %}
            <h1>{{ templateVariable }}</h1>
        {% endif %}

        <button id="testBtn">TEST</button>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
        <script type="text/javascript">

            $(document).ready(function() {
                $(function() {
                    $('#testBtn').click(function(event) {
                        $.ajax({
                            type: "POST",
                            url: "./",
                            data: {
                                'x' : 'x',
                                'csrfmiddlewaretoken' : '{{ csrf_token }}'
                            }
                        });
                    });
                });
            });

        </script>
    </body>
</html>

views.py

def index(request):
    context = {}
    if 'x' in request.POST:
        context['templateVariable'] = 'I was updated via ajax'
        print('ajax ran')
        return render(request, 'index.html', context)
    context['templateVariable'] = 'I was not updated via ajax'
    print('ajax was not run')
    return render(request, 'index.html', context)

当我第一次加载页面时，将打印“ ajax未运行”，templateVariable为“我未通过ajax更新”，并且页面按预期在h1标签中呈现。
当我单击testBtn时，我期望ajax请求触发if语句，更新上下文，并在h1标签中显示“我被ajax更新”页面。
相反，打印页面时会打印'ajax ran'，但templateVariable仍为'我没有被ajax更新'。最初加载页面时，“ ajax尚未运行”仅打印一次。

为什么我没有得到预期的结果？

编辑：似乎每个人都同意您不能使用ajax请求返回渲染和更新上下文变量，但是我仍然遇到麻烦，因为我相信这是可能的。这是一些备用代码：

index2.html：

<html>
    <body>
        {% if templateVariable %}
            <h1>{{ templateVariable }}</h1>
        {% endif %}

        <h1 id="placeHolder"></h1>

        <button id="testBtn">TEST</button>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
        <script type="text/javascript">

            $(document).ready(function() {
                $(function() {
                    $('#testBtn').click(function(event) {
                        $.ajax({
                            type: "POST",
                            url: "./",
                            data: {
                                'x' : 'x',
                                'csrfmiddlewaretoken' : '{{ csrf_token }}'
                            },
                            success: function (data) {
                                $('#placeHolder').html(data);
                            },
                            dataType: 'html'
                        });
                    });
                });
            });

        </script>
    </body>
</html>

views2.py

def index2(request):
    context = {}
    if 'x' in request.POST:
        context['templateVariable'] = 'I was updated via ajax'
        print('ajax ran')
        return render_to_response('notIndex.html', context)
    context['templateVariable'] = 'I was not updated via ajax'
    print('ajax was not run')
    return render(request, 'index.html', context)

notIndex.html：

{% if templateVariable %}
    {{ templateVariable }}
{% endif %}

在此示例中，页面最初在上下文中加载有templateVariable，因为“我未通过Ajax更新”。
单击testBtn时，ajax请求将触发视图中的if块。这将使用更新后的上下文呈现notIndex.html。
ajax调用的成功函数将生成的html从notIndex.html设置为h1标签。

那么，为什么只有当页面与ajax调用所来自的页面不同时，才可能使用ajax触发页面渲染？

Answer 1

您不能从AJAX返回渲染或重定向，这就是它的工作原理

如果您要基于服务器上发生的事情来更新UI，例如您拥有购物车，并且想要实现“添加到购物车”而不刷新页面，则“添加到购物车”按钮必须请求您在urls.py中提供的终结点，并且如果添加了对象，则url必须返回true；否则，则返回false，但不会在UI上更新它，您需要使用Javascript。

如果您尝试将渲染重定向或返回到ajax，它将获得HTML或重定向/渲染，没有其他内容。

如果您要重定向，则需要使用JS来实现，但没有Django的上下文变量。

查看此ref

Ajax触发的请求不会更新Django View

index.html：

views.py

index2.html：

views2.py

notIndex.html：

1 个答案: