如何使用 jQuery 将数据发送到 Django 视图并呈现 Django 模板？答案

【问题标题】：How to send Data with jQuery to Django view and render the Django template?如何使用 jQuery 将数据发送到 Django 视图并呈现 Django 模板？
【发布时间】：2018-03-18 19:44:40
【问题描述】：

我在 javascript 中有一些数据，想将其发送到 Django 视图函数。之后我想使用 HttpResponse 渲染一个 Django 模板，但它是如何工作的？

首先，我使用 jQuery.ajax() 将一些数据发送到 Django 视图并使用了响应数据，现在我想在第二个 jQuery.ajax() 内发送数据 - 在单击按钮后 - 发送到不同的 Django如果我点击网站上的一个简单链接，查看函数并最终呈现一个简单的模板，就像它的工作原理一样。

为了清楚起见，我已将 sn-p 尽可能剪掉了

$(matchfield).on('click', function(event) {
    event.preventDefault();
    var field = $(this).val();
    $.ajax({
        method: "POST",
        url: "/view-function/",
        data: { "field": field },
        dataType: "json",
        context: this,
        success: function (data) {
            if(data.message === 1) {
                points = 100
                $('#submit').on('click', function(event) {
                    event.preventDefault();
                    $.ajax({
                        url: "/another-view/",
                        method: "POST",
                        data: {"points": points},
                        success:function(response){ // I guess the mistake is here
                            $(document).html(response) 
                        }
                    })
                })
            }
        }
    });
});

如果点击了#submit 按钮，则响应的状态代码为 200，Chrome 开发工具在预览中显示完整的预期新 html 页面（无 css 样式），但当前页面上没有任何反应。

这是响应：

<!DOCTYPE html>
<html>
    <head>
        // head stuff
    </head>
    <body>
       // Some stuff
    </body>
</html>

我用return HttpResponse(template.render(context, request))

我的视图功能：

from django.http import HttpResponse

def another-view(request):
    if request.method == "POST":
        if request.POST.get("points"):
            points = int(request.POST.get("points"))
            template = loader.get_template('my_template.html')
            context = {'message': "any message"}
            return HttpResponse(template.render(context, request))

这就是我的视图函数的工作方式，点存储在数据库中，发生了一些神奇的事情，但一切正常，请求状态代码为 200。

不幸的是，我不知道我忽略了什么。

来自 AJAX 的响应（带有 url:“/another-view/”的内部 ajax()）是预期的 HTML 页面，但在当前页面上没有发生任何事情。我想替换整个页面

【问题讨论】：

向我们展示视图函数的 Python 代码。
您能发表一下您的看法吗？从您当前的问题来看，您似乎根本不需要 ajax。
好吧，快速浏览一下，您正在检查 points AJAX 查询何时运行，而不是 field 一个。你有if request.POST.get("field"):吗？（抱歉，过早点击提交）
我也怀疑，因为我只是想传递一个变量。@Sam
@Sam 的 2. 评论：是的，这是处理外部 AJAX 的第一个视图。我的问题是渲染我的第二个工作视图。

标签： javascript jquery python ajax django

【解决方案1】：

我找到了解决问题的方法。要使用 POST 数据重定向到 Django 视图函数，您可以使用 jQuery.redirect 函数，该函数在包含来自 https://github.com/mgalante/jquery.redirect 的 jquery.redirect.js 后可用

用法：

/**
* jQuery Redirect
* @param {string} url - Url of the redirection
* @param {Object} values - (optional) An object with the data to send. If not present will look for values as QueryString in the target url.
* @param {string} method - (optional) The HTTP verb can be GET or POST (defaults to POST)
* @param {string} target - (optional) The target of the form. If you set "_blank" will open the url in a new window.
* @param {boolean} traditional - (optional) This provides the same function as jquery's ajax function. The brackets are omitted on the field name if its an array.  This allows arrays to work with MVC.net among others.
* @param {boolean} redirectTop - (optional) If its called from a iframe, force to navigate the top window. 
*/
$.redirect(url, [values, [method, [target, [traditional, [redirectTop]]]]])

【讨论】：