如何将 javascript 存储变量发布到 django 中的视图？

Question

我正在使用 JavaScript、Django 开发测验应用程序。我坚持将变量发布到 Django (DB) 中。我不知道如何发布 Java 脚本的 score 变量以及用户登录到应用程序的名称。我将分享 JavaScript 的代码。

注意：这里我没有使用views.py来计算用户的分数。整个事情我使用 JavaScript 来验证和计算分数。

我从这里得到了三个问题：

• 如何从 JavaScript 获取变量值到 Django 视图？请告诉我路。
• 我们可以使用 ajax 将变量值发布到 Django 视图中吗？
• 如果值显示在 html 模板中。假设我的分数值存储在 JavaScript 中的 score 变量中并显示在 html 中。我希望这个值进入我的 Django 视图。那么如何从javascript中获取该值？ 注意：这里的分数不存储在表格中。它是一个单独的变量

HTML:- 在这个地方分数会显示

<div id="result" class="result" style="display:none;"></div>

JavaScript：-

  var resultCont = document.getElementById('result');
if (currentQuestion == totQuestions) {
      resultCont.style.display = '';
      console.log(score);
      if(score == 0 || score < 40)
      {
          resultCont.innerHTML = 'Your Score: ' + score + '/80'+ 'Fail';
      }
      else {
        resultCont.innerHTML = 'Your Score: ' + score + '/80' + 'Pass';
    }

      return;
    }

现在来到 models.py：

class Results(models.Model):
    username = models.ForeignKey(User,on_delete= models.CASCADE)
    quizname = models.ForeignKey(Quiz, on_delete=models.CASCADE)
    score = models.IntegerField()

我现在有这个代码，但是

1. views.py怎么写？
2. 我需要在 JavaScript 文件中使用（用户名、测验名称、分数）发布到数据库中的内容。

Answer 1

刚刚找到关于该测验的第二个问题。 我从我很久以前制作的项目中复制了代码，所以不要因为代码不干净、错误和错误而评判我（至少一切正常）:) 我是用波兰语做的，所以我只翻译成英文主要信息，但不是问题和答案。我希望您能理解我的测验的逻辑，并且该代码可以帮助您。

//array of question and answers
var data_array = [
	  ["Do czego służy polecenie Drugipunkt w AutoCAD?","Umożliwia wskazanie środka łuku.", "Pozwala na narysowanie łuku przechodzącego przez 3 różne punkty.","Umożliwia określenie kierunku rysowania łuku.","Żadna odpowiedź nie jest poprawna.",2],
        
	  ["Jaką role wykonuje NFRAGM?","Służy do powiększania i przesuwania rysunku na ekranie.","Dla nawigacji między listami.","Pierwsza i druga odpowiedzi są poprawne.","Nie wiem.",1],
        
	  ["Jak stworzyć nowy blok na bazie wybranych elementów?","Rysuj – Figure – Blok ...","Opcje - Stworzyć - Blok ... ","Nowy – Blok – Utwórz ... ","Rysuj – Blok – Utwórz ... ",4],
        
	  ["Do czego służy polecenie atrdef?","Automatycznie zmienia wartośći atrubutów.","Ulatwia rysowanie obiekyów.","Wyświetla okno dialogowe Definicja atrybutu.","Polecenie nie istnieje.",3],
        
	  ["Które rozszerzenie określa plik szablonu AutoCAD?","DWT","DXF","DWG","CAD",3],
        
	  ["Jaki ciąg znakówodpowiada symbolu średnicy okręgu ø ?","%%c","%%d","%%b","%%s",1],
	];
    
	var plus = 0;
	var time = 0;
	var cur_answer = 0;
	var count_answer = data_array.length;
	
	function sec() {
		time++;	
		document.getElementById('time').innerHTML='Passing time: ' + time + ' sec';
	}
	
	function check(num){

		if(num == 0){ 
		
			document.getElementById('option1').style.display='block';
			document.getElementById('option2').style.display='block';
			document.getElementById('option3').style.display='block';
			document.getElementById('option4').style.display='block';
			document.getElementById('question').style.display='block';

			document.getElementById('option1').innerHTML=data_array[cur_answer][1];
			document.getElementById('option2').innerHTML=data_array[cur_answer][2];
			document.getElementById('option3').innerHTML=data_array[cur_answer][3];
			document.getElementById('option4').innerHTML=data_array[cur_answer][4];
			document.getElementById('question').innerHTML=data_array[cur_answer][0];
			
			document.getElementById('start').style.display='none';
			document.getElementById('end').style.display='inline';
			
			var intervalID = setInterval(sec, 1000);
			
		}else{

			if( num ==  data_array[cur_answer][5]){
				plus++;
				document.getElementById('result').innerHTML='Your answer is correct!';
			}else{
				document.getElementById('result').innerHTML="Incorrect! Good answer is: " + data_array[cur_answer][data_array[cur_answer][5]];
			}
				
			cur_answer++;
			if(cur_answer < count_answer){
			
				document.getElementById('option1').innerHTML=data_array[cur_answer][1];
				document.getElementById('option2').innerHTML=data_array[cur_answer][2];
				document.getElementById('option3').innerHTML=data_array[cur_answer][3];
				document.getElementById('option4').innerHTML=data_array[cur_answer][4];
				document.getElementById('question').innerHTML=data_array[cur_answer][0];
				
			}else{
				
				document.getElementById('time').id = 'stop';
				document.getElementById('option1').style.display='none';
				document.getElementById('option2').style.display='none';
				document.getElementById('option3').style.display='none';
				document.getElementById('option4').style.display='none';
				document.getElementById('question').style.display='none';
				document.getElementById('end').style.display='inline';
				
				var percent =  Math.round(plus/count_answer*100);				
				var res = 'You are Junior!';
				if(percent>70) res = 'You are Med-Level!';
				if(percent==100) res = 'You are Senior! Congratulation!';
				
				document.getElementById('result').innerHTML='Correct answers: ' + plus + ' out of ' + count_answer + ' (' + percent + '%)<br>' + res;
			}
		}
	}

body{
    background: #fff url(img/bg1.jpg); 
    color: #fff; 
   
	font-family:verdana;
	color:#444;
}
p{
  font-size: 38px;
  font-weight: bold;
  padding-top: 2px;
}

#option1,#option2,#option3,#option4{
	display:none;
	margin-bottom: 10px;
}
.test1{
     background-color: #6cb670;
    border: 1px;
    color: white;
    padding: 8px 12px;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    margin-right: 20px;
    cursor: pointer;
}
    .test2{
     background-color: #088A68;
    border: 1px;
    color: white;
    padding: 8px 12px;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    margin-right: 20px;
    cursor: pointer;
}

<!DOCTYPE html>
<html>
  <body>
	<center>			
		<p id="time">Passing time: 0 sek</p>
		<p id="result"></p>
		<p id="question"></p>
		
		<button onclick="check(1)" class="test1" id="option1"></button>
		
		<button onclick="check(2)" class="test1" id="option2"></button>
		
		<button onclick="check(3)" class="test1" id="option3"></button>
		
		<button onclick="check(4)" class="test1" id="option4"></button>
	</center><br>
	<center>
		<button id="start" class="test2" onclick="check(0)">Start</button>
		<script type="text/javascript"> var curent_url = document.URL; document.write("<a id='end' style='display: none;' class='test2' href='" + curent_url + "'>Start again!</a>"); </script>	
	</center><br><br>
	<center style="clear:both;"><br>

		<a class="test2" href="index.html">Home<i class="fa fa-home fa"></i> </a>
	</center>
    
</body>
</html>