小编典典

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

ajax

我试图将这个问题分解为最简单的例子。当请求是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可以触发页面渲染呢？

阅读 215

2020-07-26

共1个答案

小编典典

您无法从AJAX返回渲染或重定向，这就是它的工作方式

如果要基于服务器上发生的事情更新UI，例如您拥有购物车，并且想要在不刷新页面的情况下实现“添加到购物车”，则“添加到购物车”按钮必须请求您提供的端点在urls.py＆中，如果添加了object，则该URL必须返回true；否则，它必须返回false，但不会在UI上对其进行更新，因此您需要使用Javascript手动更改购物车商品计数。

如果您尝试重定向或将渲染返回到ajax，它将获得HTML或重定向/渲染，仅此而已。

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

2020-07-26