Question

我有一个单选按钮表单，在我的模板中充当多项选择测验。我需要检查所选答案是否正确答案，然后将模型中的得分属性更新为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', {})

Answer 1

这就是＆＃34; Ajax＆＃34;进入了画面。

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

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

jQuery已经在HTTP Request函数中有多个构建，您可以使用它来向后端执行Ajax请求。最常用的是：

$。ajax（）Docs
$ .post（）Docs
$。get（）Docs

在您的情况下，您希望将表单数据提交到后端。因此，我建议您使用$.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的URL替换为处理请求的Django中的一个视图。另请注意，您当前的视图（view_takeQuiz()）仅处理GET请求。不是POST请求。

最后！ Django使用csrf-token来确保应该允许该请求。在您的情况下，您在实际表单之外包含CSRF令牌。您应该将{% csrf_token %}移到<form>...</form>。

Answer 2

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

首先，将表单方法更改为发布。

然后向表单添加一个action属性： action =“{url'ultipleChoice：view_takeQuiz'quiz.id}”

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

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

from . import views

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

（？P [0-9] +）可以是任何整数值，它是存储您的测验ID号的，它是从您的表单在action属性中传递的，然后存储在quizID变量中传递给你的view_takeQuiz方法

然后在您的view方法中，您可以处理与您的问题类似的数据，除了使用request.POST而不是GET

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

2 个答案: