如何将 Django 视图函数的响应发送到 HTML 弹出窗口

Question

所以，我的应用程序是这样工作的： 1-用户点击和一个函数将调用一个ajax jquery将一些数据发送到views.py中的一个函数，完成！ 2-函数中会进行一些处理。一些数据准备好了。完毕！ 3- 我想以 html 格式显示数据，例如弹出窗口。

所以，我被困在第 3 步。 我是这方面的新手，我没有找到任何直接的指导。 你可以在How to send a simple data by Ajax jQuery to views.py in Django?找到我的第一步

提前致谢

Answer 1

这几乎与任何其他视图一样简单。只需返回一个渲染，您就可以使用 django 模板语法来处理上下文数据。 您只需要编写一个创建请求的ajax函数（步骤1）， 接受它并返回数据的视图（步骤 2） 在步骤 1 中的 ajax 成功函数中，将数据附加到您的 HTML（或创建一个弹出窗口）

如果您卡在第 2 步和第 3 步之间，请务必使用开发工具。如果 django 返回数据，您将能够以 XHR 响应的形式对其进行检查

# The HTML returned mainly consists of a javascript lib 
@login_required
def barcode_scan(request):
    # usually you would fill this page with some context data
    return render(request, "barcode.html")


# View for accepting ajax requests and for returning more data
@login_required
def barcode_view(request, tracking):
    shipment = get_object_or_404(PhysicalShipment, tracking_id=tracking)

    if request.method == "POST":

        if shipment.is_returnable():
            # ... some more logic here ...
            customer = shipment.customer
            content = shipment.content
            context = {
                "customer": customer,
                "content": content,
                # ...
                "canreturn": False,
            }
            return render(request, "barcode_snippet.html", context)
        else:
            success = False
            error_message = shipment.get_status_error_message()
            return JsonResponse({"success": success, "error": error_message})

    elif request.GET.get("ajax"):
        """ displays barcode shipment information """
        customer = shipment.customer
        content = shipment.content
        context = {
            "customer": customer,
            "content": content,
            # ...
            "canreturn": shipment.is_returnable(),
        }
        return render(request, "barcode_snippet.html", context)

    return render(request, "barcode.html")

在我的示例中，barcode.html 包含一个 js-barcodescanner。检测到代码后，它将调用视图 GET 参数 ?ajax=True 并使用 tracking_code。服务器将使用barcode_sn-p 进行响应，它包含有关内容和客户的上下文数据。根据 canreturn 标志，用户将能够单击详细信息窗口内的链接，这一次它将 POST 数据，这将触发一些服务器端的事情。 再次返回barcode_sn-p，这次是禁止操作。

然后我使用 JQuery 将响应 (barcode_sn-ps) 附加到我的站点。

success: function (response) {
    $("#results").append(response);
}