Django, ajax는 모델 데이터로 양식을 채 웁니다.

Question

간단한 등록 양식이 있습니다.

• 대학
• 코스
• 모듈
데이터를 필터링하는 것입니다 난 할 노력하고있어

:이 양식에서 3 개 분야가있다. 따라서 사용자가 대학을 선택하면 코스 필드 (선택)에이 대학에 속한 모든 코스가 표시됩니다. 또한 사용자가 코스를 선택하면 모듈 필드 (선택)에이 코스에 속한 모든 모듈이 표시됩니다. 이미지를 확인하면 그 이미지가 다소 단순합니다.

모든 대학, 강좌 및 모듈을 보여 주었지만 데이터가 정확하지 않아 실용적이지 않습니다 (모든 항목 표시). 쿼리 세트를 필터링하는 방법을 알고 있지만 AJAX를 사용하여이를 수행하는 방법을 모르겠습니다. 많은 자습서를 시도했지만 뭔가를 찾을 수 없어서 코드를 게시하지 않아서 유감입니다.

당신은 ... 권리 튜토리얼, 예를 날 지점 또는 나에게 그 작업을 시작하는 몇 가지 코드를 제공 할 수 있다면 내가 작업을 시작하는 델의 예를 사용

UPDATE . 문제는 내가 AJAX와 JS가 전혀 좋지 않다는 것입니다. 그래서 저는 아약스 양식으로부터 요청을받는 뷰를 만들었습니다 (지금은 모든 과정을 반환하고 필터링은하지 않습니다). 내가 가지고있는 문제는 대학을 선택하면 course select가 비게됩니다. 그래서 나는 그것이보기에서 데이터를 얻지 못한다고 생각한다. 내가 대학을 선택한 후 2

그래서, 선택 과정의 소스 코드처럼 좀 ..

보기

def ajax_get_courses(request): 
    courses = Course.objects.all() 
    if request.is_ajax(): 
     data = serializers.serialize('json', courses) 
     return HttpResponse(data,'json') 
    else: 
     return render_to_response('registration/registration_form_teacher.html', {'courses':courses}, context=RequestContext(request)) 

JS

$(document).ready(function(){ 
    $("#university").change(function(){ 
     var request = $.ajax({ 
      url: "{% url 'ajax_get_courses' %}", 
      type: "POST", 
      data: { university: $("#university").val(), 
        csrfmiddlewaretoken: '{{ csrf_token }}' 
        }, 
      dataType: "html" 
     }); 

     request.done(function(msg) { 
        $("#course").html(msg); 
     }); 

    }); 

}); 

UPDATE를 할 수있는 경우 이 :

<select id="course" name="course" class="form-control">[{"pk": 1, "model": "studies.course", "fields": {"attendance": "FT", "name": "Computer Science", "degree": "BSc (Hons)", "university": 1, "modules": [], "years": 3}}, {"pk": 2, "model": "studies.course", "fields": {"attendance": "FT", "name": "Computer Science", "degree": "MComp (Hons)", "university": 1, "modules": [], "years": 4}}, {"pk": 3, "model": "studies.course", "fields": {"attendance": "FT", "name": "Civil Engineering", "degree": "BEng (Hons)", "university": 1, "modules": [], "years": 3}}, {"pk": 4, "model": "studies.course", "fields": {"attendance": "FT", "name": "Civil Engineering", "degree": "MEng (Hons)", "university": 1, "modules": [], "years": 4}}, {"pk": 5, "model": "studies.course", "fields": {"attendance": "FT", "name": "Pharmacy", "degree": "MPharm (Hons)", "university": 1, "modules": [], "years": 4}}, {"pk": 6, "model": "studies.course", "fields": {"attendance": "FT", "name": "Aeronautical Engineering", "degree": "MEng (Hons)", "university": 4, "modules": [], "years": 4}}, {"pk": 7, "model": "studies.course", "fields": {"attendance": "FT", "name": "Biochemistry", "degree": "BSc (Hons)", "university": 3, "modules": [], "years": 3}}, {"pk": 8, "model": "studies.course", "fields": {"attendance": "FT", "name": "Chemistry", "degree": "BSc (Hons)", "university": 3, "modules": [], "years": 3}}, {"pk": 9, "model": "studies.course", "fields": {"attendance": "FT", "name": "Business Studies", "degree": "BSc (Hons)", "university": 3, "modules": [], "years": 3}}]</select> 

즉, 데이터를 가져 오는 중이지만 일부 html을 추가해야합니까? <li>...</li>처럼?

Answer 1

이것은 수행하는 데 약간의 단계가 필요하지만 실제보다 더 위협적으로 보입니다.

먼저 ajax 요청을 수신하고 HTML 또는 JSON으로 적절한 선택 옵션을 리턴하는 새로운보기를 작성하십시오.

그런 다음 University 선택 상자가 변경되면 jQuery ajax function을 사용하여 ajax 요청을 실행하십시오.

다음은 시작하는 데 도움을 시도하는 간단한 예입니다 ...

$("#university").change(function(){ 
$.ajax({ 
      url: "{% url 'universities:view_name' %}", 
      type: "POST", 
      data: { university: $("#university").val(), 
        csrfmiddlewaretoken: '{{ csrf_token }}' 
       }, 
      dataType: "html" 
     }); 
    } 

// When the request returns, update the contents of the select with HTML received 
// from your processing view 

request.done(function(msg) { 
      $("#university").html(msg); 
     }); 

나는이 조금 도움이되기를 바랍니다. 행운을 빌어 요.

EDIT : 업데이트에서 json을 생성하고 있지만, ajax로 html을 요청하고 있습니다. json 대신 html을 문자열로 만든 다음이를 템플릿의 단독 콘텐츠로 렌더링하십시오. 보기에서이 같은

뭔가 :

html_string="" 
for course in Courses.objects.all(): 
    html_string += '<option value="%s">%s</option>' % (course.pk, course.name) 

당신은 JSON 데이터를 사용하여 클라이언트 측 자바 스크립트와 함께이 작업을 수행 할 수 있습니다,하지만 난 쉽게 생각하고 그것을 처리하기 위해 적은 데이터 전송을 필요로 전망.