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

Question

我正在努力实现三件事:

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

一旦我开始工作，我将在将一些输出作为上下文变量传递之前对 views.py 中的输入进行一些处理 - 但首先我需要弄清楚基本的从一个模板中的用户输入移动的原则 ->views.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

我做错了什么？

Answer 1

感谢@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>

结果模板现在的 views.py 具有一个也返回上下文的 post 方法:

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