通过Django/jQuery后端处理HTML测验表单_Jquery_Django_Sqlite

通过Django/jQuery后端处理HTML测验表单

jquery django sqlite

通过Django/jQuery后端处理HTML测验表单,jquery,django,sqlite,Jquery,Django,Sqlite,我有一个单选按钮表单，它在我的模板中充当多项选择题测验。我需要检查选择的答案是否正确，然后将模型中的score属性更新为1。我现在知道如何在jQuery中检查按钮值，但不知道如何通过Djanog处理它 {% extends "mainpage/base.html" %} {% block content %} <!DOCTYPE html> <html lang="en"> <head> <titl

我有一个单选按钮表单，它在我的模板中充当多项选择题测验。我需要检查选择的答案是否正确，然后将模型中的score属性更新为1。我现在知道如何在jQuery中检查按钮值，但不知道如何通过Djanog处理它

    {% extends "mainpage/base.html" %}

    {% block content %}

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Multiple Choice</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>

    $(document).ready(function(){
      $('#quiz').on('change', function(){
        if($('input[name=optradio]:checked').val() == "{{correctAnswer}}"){

          // var $score = '{{score}}';
          // var s = $score.val();
          // s++;
          // alert(s);
          // alert('youre correct');
          //if the user choses the right button and submits quiz, then show them their score
        }
        //  alert('correct');
      })
    })

    // })
    </script>
    </head>
    {% csrf_token %}
    <html>
    <p>{{ title }}</p>
    <div class="container">
       <form method="GET" class="QuestionForm" id="quiz">
        <div class="radio">
          <label><input type="radio" name="optradio" id="A" value="{{answerA}}">{{answerA}}</label>
        </div>
        <div class="radio">
          <label><input type="radio" name="optradio" id="B" value="{{answerB}}">{{answerB}}</label>
        </div>
        <div class="radio">
          <label><input type="radio" name="optradio" id="C" value="{{answerC}}">{{answerC}}</label>
        </div>
        <div class="radio">
          <label><input type="radio" name="optradio" id="D" value="{{answerD}}">{{answerD}}</label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
    </html>
    {% endblock %}


def results(request):
    # show results of quiz to user
    return redirect('https://www.google.de/')

def view_takeQuiz(request,quizID):
    try:
        quiz = Quiz.objects.get(quizID=quizID)
        context = {'title': quiz.title, 'answerA': quiz.answerA, 'answerB': quiz.answerB,
        'answerC': quiz.answerC,'answerD': quiz.answerD,
        'correctAnswer': quiz.correctAnswer, 'score':quiz.score}
        return render(request, 'multipleChoice/takeQuiz.html', context)

    except:
        return render(request, 'multipleChoice/quiz.html', {})

{%extends“mainpage/base.html”%}
{%block content%}
选择题
$（文档）.ready（函数（）{
$（'#quick'）。关于（'change'，function（））{
if（$（'input[name=optradio]：checked'）.val（）{
//var$score='{{score}}'；
//var s=$score.val（）；
//s++；
//警报；
//警惕（“你是对的”）；
//如果用户选择右键并提交测验，则显示他们的分数
}
//警惕（“正确”）；
})
})
// })
{%csrf_令牌%}
{{title}}
{{answerA}}
{{answerB}}
{{answerC}}
{{answerD}
提交
{%endblock%}
def结果（请求）：
#向用户显示测验结果
返回重定向（'https://www.google.de/')
def视图_测验（请求，提问）：
尝试：
quick=quick.objects.get（quizID=quizID）
上下文={'title'：quick.title，'answerA'：quick.answerA，'answerB'：quick.answerB，
回答：测验，回答，回答：测验，回答，
'correctAnswer'：quick.correctAnswer，'score'：quick.score}
返回呈现（请求'multipleechoice/takequick.html'，上下文）
除：
返回呈现（请求'multipleechoice/quick.html'，{}）

这就是“Ajax”的用武之地

使用Ajax，Web应用程序可以异步（在后台）向服务器发送数据和从服务器检索数据，而不会干扰现有页面的显示和行为。通过将数据交换层与表示层分离，Ajax允许Web页面，并通过扩展Web应用程序，动态更改内容，而无需重新加载整个页面

所以Ajax的作用是，它从Javascript（客户端）向服务器发送请求，并返回响应，而不必刷新客户端所在的页面

jQuery已经有了多个内置HTTP请求函数，您可以使用这些函数对后端执行Ajax请求。最常用的是：

$.ajax（）
$.post（）
$.get（）

在您的情况下，您希望将表单数据提交到后端。因此，我建议您使用

$.post（）

来执行此操作

例如：

// When the form is submitted...
$('form#quiz').on('submit', function(e) {
    // ... Stop it from refreshing the page.
    e.preventDefault();

    //... then send the data to the backend server
    $.post('/myurl/handlepost/', {data: $(this).serialize()}, function(response){
        // This is where you handle a successful call.
        // The `response` var contains the data output from
        // the backend.
    });
});

注意，您必须将我使用的URL替换为Django中处理请求的一个视图的实际URL。还要注意，当前视图（

view\u takequick（）

）只处理

GET

请求。不是

POST

请求

最后！Django使用csrf令牌来确保请求应该被允许。在您的情况下，您将CSRF令牌包含在实际表单之外。您应该将

{%csrf\u token%}

移动到

..

这就是“Ajax”出现的地方

所以Ajax的作用是，它从Javascript（客户端）向服务器发送请求，并返回响应，而不必刷新客户端所在的页面

jQuery已经有了多个内置HTTP请求函数，您可以使用这些函数对后端执行Ajax请求。最常用的是：

$.ajax（）
$.post（）
$.get（）

在您的情况下，您希望将表单数据提交到后端。因此，我建议您使用

$.post（）

来执行此操作

例如：

// When the form is submitted...
$('form#quiz').on('submit', function(e) {
    // ... Stop it from refreshing the page.
    e.preventDefault();

    //... then send the data to the backend server
    $.post('/myurl/handlepost/', {data: $(this).serialize()}, function(response){
        // This is where you handle a successful call.
        // The `response` var contains the data output from
        // the backend.
    });
});

注意，您必须将我使用的URL替换为Django中处理请求的一个视图的实际URL。还要注意，当前视图（

view\u takequick（）

）只处理

GET

请求。不是

POST

请求

最后！Django使用csrf令牌来确保请求应该被允许。在您的情况下，您将CSRF令牌包含在实际表单之外。您应该将

{%csrf\u token%}

移动到

..

中。如果要使用django更新模型，可以执行以下操作

首先，将表单方法更改为post

然后将操作属性添加到表单中： action=“{url'multipleechoice:view_takequick'quick.id}”

这指定表单数据的发送位置，并在提交表单时作为变量传递测验id

接下来，必须将该url链接到要处理表单数据的view方法。这是通过将以下内容添加到URL.py来完成的：

from . import views

urlpatterns = [ 
    # other urls
        url(r'^result/(?P<pk>[0-9]+)/$', views.view_takeQuiz , name='view_takeQuiz'),
   ]

来自。导入视图
urlpatterns=[
#其他网址
url（r“^result/（？P[0-9]+）/$”，views.view_takequick，name='view_takequick'），
]

（？p[0-9]+）可以是任何整数，它存储测验id号，该id号是从动作属性的表单中传递过来的，然后存储在传递给view_takequick方法的quizID变量中

然后，在视图方法中，您可以处理与问题类似的数据，除了使用request.POST而不是GET之外。如果您想使用django更新模型，可以执行以下操作

首先，将表单方法更改为post

然后向fo添加一个动作属性