为什么我在 ajax 上渲染 Django 模板时，浏览器上没有出现成功？答案

【问题标题】：Why when I render Django template on ajax, success does not appear on the browser?为什么我在 ajax 上渲染 Django 模板时，浏览器上没有出现成功？
【发布时间】：2018-11-21 12:54:20
【问题描述】：

当我在 js 文件中使用 console.log() 时，我的 Html 页面没有在 ajax 成功时呈现，HTML 页面在浏览器控制台中打印出来，而不是在浏览器本身中。

请检查我的以下代码：

views.py：

def Filter_by_Products(request):
    if request.is_ajax():
        if request.method == 'GET':
            print("filter by function!")
            filter_brand = request.GET.get('filter_brand')
            products_qs, qs_color, qs_size = product.objects.Filter_brand(filter_brand.rstrip(','))
           context={
            "object_list": products_qs,
            'colors': qs_color,
            'sizes':qs_size
            }
            # print(products_qs)
            # print(qs_color)
            # print(qs_size)

     return render(request,"product/products.html",context)

ajax.js：

$.ajax({
        url:'/cart/api/filterby/',
        method:'get',
        data:
            {
                'filter_brand':str,

            },
        success: function (data) {
            console.log(data)
            // location.reload()
        },
        error: function (error) {
            console.log(error)
        }

    })

在谷歌搜索我的问题后，我发现我的问题是我试图将服务器端与客户端混合，解决方案是使用 HttpResponse 而不是渲染函数发送我的 HTML 模板，然后使用 javascript，我选择 HTML 页面并使用新的 html 更改内容。

实际上，我并不清楚问题以及为什么将服务器与客户端混合会导致该问题以及为什么我的代码从第一次使用渲染时就无法正常工作，所以请您详细解释一下或参考链接给我理解。

另外，我对 Django celery 和 Redis 很熟悉，如果我可以在那种情况下使用这些技术，你能告诉我如何使用它们吗？

【问题讨论】：

标签： python django django-templates

【解决方案1】：

当我使用 Django 和 Ajax 时，我喜欢使用来自 django.http 的库 JsonResponse。这样，我可以传递状态响应（200、500、...），以及前面将要处理的数据。

您的问题是，在您收到响应后，您正在重新加载页面。

// location.reload()

由于您的响应数据是一个对象，您必须使用 javascript 定义它将在屏幕上放置的位置，例如：

success: function (data) {
        console.log(data);
        $("#div_object_list").html(data.object_list);
    },

【讨论】：

感谢您的回答，我知道我应该使用 JsonResponse 但我不知道为什么当我将服务器端与客户端混合时会发生此问题
在这种情况下我可以使用 django celery 和 redis 吗？
你会想要获得 celery 任务的回报吗？

【解决方案2】：

return render(request,"product/products.html",context)没问题，它会返回一个渲染的html页面的内容。

问题在于您的 ajax 请求调用：// location.reload()，指的是w3schools.com，它仅重新加载当前页面，而不用返回的响应替换页面的内容。

如果您需要用返回的响应替换整个页面，那么您的 ajax success 函数应该是这样的：

success: function (response) {
        var newDoc = document.open("text/html", "replace");
        newDoc.write(response);
        newDoc.close();
       }

如果你只需要替换为特定的html div，你可以这样做：

success: function(response) {
            $('#my-div').html(response);
        }

【讨论】：