Question

当我在js文件中使用console.log()时，无法成功在Ajax上显示我的HTML页面，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 not render函数发送HTML模板，然后使用javascript，选择HTML页面并使用新的html更改内容。

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

另外，我熟悉Django celery和Redis，如果我可以在这种情况下使用这些技术，请问我如何使用它们。

Answer 1

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

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

// location.reload()

由于您的受访者数据是一个对象，因此您必须使用javascript定义将其放置在屏幕上的位置，例如：

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

Answer 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);
        }

为什么当我在Ajax上呈现Django模板时，浏览器上没有显示成功？

2 个答案: