时间戳

首页 > 解决方案 > 将 JS 变量发布到 Django 视图并在单独的模板中显示为上下文变量

python - 将 JS 变量发布到 Django 视图并在单独的模板中显示为上下文变量

问题描述

我正在努力实现三件事：

  1. 在一个模板中使用标准 HTML 表单收集一些用户输入（questions.html如下）；
  2. 将该输入发布到我的views.py; 最后
  3. 在单独的模板中将该输入显示为上下文变量（results.html如下）。

一旦我让它工作，我将views.py在将一些输出作为上下文变量传递之前对输入进行一些处理 - 但首先我需要弄清楚在一个模板中从用户输入移动的基本原则 --> 视图.py --> 另一个模板中的上下文变量。

另外，我故意这样做而不接触任何数据库，因为我不想保存任何用户数据。

以下是我的questions.html，收集年龄和教育水平：

<script type="text/javascript">
    $(document).ready(function(){
        $('#submit_answers').submit(function (event) {
            var user_age = document.getElementById("age-choice").value;
            var user_education = document.getElementById("education-choice").value;
            $.ajax({
                type:"POST",
                url:"{% url 'results' %}",
                data : {
                    'age': user_age,
                    'education': user_education,
                    'csrfmiddlewaretoken':$("input[name=csrfmiddlewaretoken]").val()
                },
            })
        }
    )});
</script>

<p>Please answer the following questions:</p>

<p>What is your age?</p>
<form action="" method="GET" id="age-dropdown">
    {% csrf_token %}
    <select class="browser-default custom-select" id="age-choice">
        <option value="18-30">18-30</option>
        <option value="30-40">30-40</option>
        <option value="40-50">40-50</option>
        <option value="50-65">50-65</option>
        <option value="65-100">Over 65</option>
    </select>
</form>

<p>What is your highest level of education?</p>
<form action="" method="GET" id="education-dropdown">
    {% csrf_token %}
    <select class="browser-default custom-select" id="education-choice">
        <option value="None">None</option>
        <option value="GCSE">GCSE</option>
        <option value="A-level">A-level</option>
        <option value="University">University</option>
        <option value="Postgraduate">Postgraduate</option>
    </select>
</form>

<form id="submit_answers" method="post">
    {% csrf_token %}
    <input type="submit" name="submit_answers" class="btn btn-primary btn-sm pull-right" value="Submit" />
</form>

这是我的urls.py：

urlpatterns = [
    path('', HomePageView.as_view(), name='home'),
    path('questions/', QuestionsView.as_view(), name='questions'),
    path('results/', ResultsView.as_view(), name='results'),
]

这是我的views.py：

class QuestionsView(TemplateView):
    template_name = 'questions.html'

class ResultsView(TemplateView):
    template_name = 'results.html'

    def answers(request):
        if request.method == 'POST':
            context = {}
            context["age"] = request.POST['age']
            context["education"] = request.POST['education']
            return context

并且results.html：

<p>Results:</p>
Age: {{ age }} <br />
Education: {{ education }}

有了以上内容，我在终端中得到了这个：

Method Not Allowed (POST): /results/
Method Not Allowed: /results/
[03/Dec/2019 15:43:22] "POST /results/ HTTP/1.1" 405 0
Method Not Allowed (POST): /questions/
Method Not Allowed: /questions/
[03/Dec/2019 15:43:22] "POST /questions/ HTTP/1.1" 405 0

我究竟做错了什么？

标签： pythondjango

解决方案

感谢@DanielRoseman 和@Matthias 的建议。我按照 Daniel 的建议切换到表单，以及 Matthias 的建议放弃 JS，如下：

首先是表格forms.py：

EDUCATION_CHOICES= [
    ('none', 'None'),
    ('gcse', 'GCSE'),
    ('alevel', 'A-level'),
    ('university', 'University'),
    ]

class UserInputForm(forms.Form):
 age = forms.IntegerField(label='Enter your age')
 education = forms.CharField(label='What is your highest level of education?', widget=forms.Select(choices=EDUCATION_CHOICES))

然后是表单模板userinputform.html：

<form action="/results/" method="post">
    {% csrf_token %}
    {{ form }}
    <input type="submit" value="Submit" />
</form>

结果模板现在有一个 post 方法，该views.py方法也返回上下文：

class HomePageView(TemplateView):
    template_name = 'home.html'

class ResultsView(TemplateView):
    template_name = 'results.html'

    def post(self, request):
        context = {}
        context["age"] = request.POST['age']
        context["education"] = request.POST['education']
        return render(request, 'results.html', context)

def userinputform(request):
    form = UserInputForm()
    return render(request, 'userinputform.html', {'form':form});

最后，results.html：

<p>Results:</p>
Age: {{ age }} <br />
Education: {{ education }}

推荐阅读