1
저는 아약스에 새로 왔고 자바 스크립트에있는 배열을 제 관점으로 전달하려고합니다.배열을 Ajax를 통해 장고보기로 전달할 수 없습니까?
이것은 내 템플릿입니다. 학생 ID 번호와 코스 점수를 가져 와서 테이블을 만들고 학생이 추가하고 싶은 코스를 추가하는 한 가지 양식이 있습니다.
자바 스크립트에 "stock"변수가 하나 있습니다. "재고 있음"은 선택한 모든 과정의 ID 번호와 점수를 저장합니다. 선택한 교육 과정을 데이터베이스에 추가하기 위해 주식을 보내고 싶습니다. 나는 그것을하기 위해 Ajax를 사용한다. 그러나 그것은 "에러를 일으키기"를 얻지 않는다.
def student_add_course(request,student_id):
if request.method=='GET':
context={'id':student_id , 'form':AddCourseForStudentForm()}
request.session['ListOfCourses']=[]
return render(request, 'student/AddCourseForStudentForm.html',context)
elif request.method=='POST':
print request.POST.getlist('stock[]')
return render(request, 'student/add_course.html')
코드에 어떤 문제가 :
<!DOCTYPE html>
<html>
<head >
<title>Add new course</title>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'student/css1.css' %}" />
{% include "student/base.html" %}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="metric_results">
<div id="form">
<form name="myForm" method="post">
{% csrf_token %}
{{ form.non_field_errors }}
<div id="form-data">
{{ form.course_id }}{{ form.course_id.errors }}
<label for="id_course_id">ID number:</label><br>
{{ form.score }}{{ form.score.errors }}
<label for="id_score">score:</label><br>
<p id="add_button"><input type="button" value="add" /></p>
<p><input type="submit" value="submit" /></p>
</div>
</form>
</div>
<div id="table">
<table id="TABLE" border = '1'>
</table>
</div>
<script type="text/javascript">
//when click on "add" button,call "addTable" function.
document.getElementById("add_button").onclick = function() {addTable()};
document.getElementById("delete_button").onclick = function() {DeleteTableRow()};
var stock = new Array();
var i = 0;
function addTable() {
var id = document.forms["myForm"]["course_id"].value;
var score = document.forms["myForm"]["score"].value;
var c = document.createElement("INPUT");
var heading = new Array();
c.setAttribute("type", "checkbox");
stock[i] = new Array(id, score);
//table heading
heading=["idnumber","score","delete"];
//check Is there selected course in table
for(j=0; j<i; j++){if (stock[j][0] == id){alert("this course was selected.");}}
//Get the table that shows the selected course from html code
var table = document.getElementById('TABLE');
//At first create table heading
if(i==0){
var tr = document.createElement('TR');
for(j=0;j<3;j++){
var th = document.createElement('TH');
th.appendChild(document.createTextNode(heading[j]));
tr.appendChild(th);}
table.appendChild(tr);}
//Create table row and append it to end of table
var tr = document.createElement('TR');
for (j = 0; j < 3; j++) {
var td = document.createElement('TD');
if(j == 2){
td.setAttribute("id","check_box"+(i+1));
td.appendChild(c);}
else{
td.setAttribute("id","rows"+(i+1));
td.appendChild(document.createTextNode(stock[i][j]));}
tr.appendChild(td);
}
table.appendChild(tr);
document.forms["myForm"]["course_id"].value="";
document.forms["myForm"]["score"].value="";
i=i+1;
}
var postUrl = "http://localhost:8000/student/{{id}}/student_add_course/";
$('form[name="myForm"]').submit(function(){
$.ajax({
url:postUrl,
type: "POST",
data: {'stock': stock},
error:function (xhr, textStatus, thrownError){
alert("error doing something");
},
})
});
</script>
</body>
</html>
이 내 생각입니까? 이 작업을 수행하는 더 좋은 방법이 있습니까?
누군가 나를 도와 주시면 기쁘게 생각합니다.
영어 불쾌한 경우 죄송합니다. 모든
하는'경고 (thrownError)을 수행;' 대신 오류가 무엇인지 확인하십시오. –
나는 이것을하고 말하지 않는다 – user3789719
@ user3789719 ajax POST 요청을하기 때문에 csrf 토큰을 전달해야합니다. – mariodev