Question

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

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

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">

calc.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代码动态添加它们。

可能是这样的：

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。

希望对您有帮助。

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

3 个答案: