如何将参数从 javascript 传递到 django 视图？

Question

我正在尝试用简单的计算器来做页面。我在 js 中制作了计算器，现在，当我单击按钮时，我想将参数从 js 传递给 django。在那里计算它们并在重定向页面上打印。

重定向页面有问题。当我不在表单中放置按钮时，js 脚本调用计算视图，但不重定向页面。我想要重定向页面并在那里打印结果。

html代码：

<form action="calc/" method="post">
    {% csrf_token %}
    <input id='btn' type="submit" value="CALC" onclick="change()">
</form>

javascript代码：

function change(){
    var foo = 1;
    var foo1 = [1, "tralal", true, ''];

    $.ajax({

        url: 'calc/',
        data : {
            'foo': foo,
            'foo1': foo1,
        },
        success: function (data) {
            alert("it worked!");
        }
    }
)};

django 中的网址

path('calc/', views.calc, name='calc')

在 django 中查看

def calc(request):
    foo = request.GET.get('foo')
    print(foo)
    foo1 = request.GET.getlist('foo1[]')
    print(foo1)
    context = {'data': foo1}
    return render(request, 'calc.html', context)

Answer 1

如果您想重定向到另一个页面，您必须在调用成功回调时从 javascript 显式执行此操作。您可以看到here 一些关于如何从 javascript 重定向页面的答案。为此，您必须有另一个视图来提供结果页面。 计算结果可以保存在服务器中（缓存），也可以从客户端进行通信。

但是，我想知道您为什么要为此使用 Ajax 请求。如果您想在不刷新（或重定向）页面的情况下向服务器执行一些异步 http 请求，Ajax 请求非常有用。所以我想说，不要在这里使用 Ajax 请求，只需提交表单即可。您可以查看例如 here 以了解表单在 javascript 中的工作方式。您也可以查看Django tutorial 关于使用表格的信息。 Django 有一些处理表单的工具，例如当您想在数据库模型中更新或创建新实例时非常方便。一开始可能会有点混乱，但我认为值得花一些时间了解 Django 表单。

Answer 2

我做了这样的事情，它有效，但我不知道它是否正确。

views.py

def link(request):
    global matrix
    matrix = request.GET.getlist('foo1[]')
    return HttpResponseRedirect('/calc/')


def calc(request):
    if request.is_ajax:
        global matrix
        context = {'data': matrix}
        return render(request, 'calc.html', context)
    else:
        return HttpResponseRedirect('/')

urls.py

path('link/', views.link, name='link'),
path('calc/', views.calc, name='calc'),

js函数

$(document).ready(function() {
$("#btn").click(function(e) {
    var foo = 1;
    var foo1 = [1, "tralal", true, ''];

    $.ajax({
        url: 'link/',
        data : {
            'foo': foo,
            'foo1': foo1,
        },
        success: function (data) {
             window.location.href = "calc/"
        }
    });
});
});

html代码

<input id='btn' type="submit" value="COUNT">

计算.html

{% for d in data %}
    <p>"{{ d }}"</p>
{% endfor %}

页面重定向到 calc/ 并显示正确的非无矩阵。 Result

Answer 3

使用 window.location.href = "127.0.0.1:8000/calc" 得到的结果是正常的。您只是在没有任何 url 查询参数的情况下重定向到同一页面。

那么，您基本上是想重定向到同一页面？ 那你为什么要重定向？这对我来说没有多大意义。同样，如果您想重定向，请不要使用 AJAX，并按照“正常”的方式提交表单。

所以我认为更有意义的是，不要重定向，而是使用您从 AJAX 请求收到的数据并显示信息。您仍然可以使用一些 Django 诱人的方法并返回一些渲染的 HTML，然后您将使用一些 Javascript 代码动态添加这些 HTML。

可能是这样的：

Javascript

$.ajax({
    url: 'link/',
    data : {
        'foo': foo,
        'foo1': foo1,
    },
    success: function (data) {
         $('#result-container').html(data)  // add the data in the div container
         $("#your-form").trigger('reset'); //you should reset your form
    }
});

“/”处的主 HTML 应包含

<div id="result-container"></div>

你应该摆脱你的链接视图，让另一个像那样

def calc(request):
    if request.is_ajax:
        matrix = request.GET.getlist('foo1[]')
        context = {'data': matrix}
        return render(request, 'calc.html', context)

但我再次告诉你，你应该使用 Django 表单来完成你的工作。例如，请参阅this tutorial。

希望对你有帮助。