ajax를 적용하여 드롭 다운에서 데이터를 가져 오는 방법은 무엇입니까?

Question

django를 백엔드로 사용하여 내 결과를 쿼리합니다. 3 개의 드롭 다운이 있고 내보기에서 첫 번째 드롭 다운의 값을 사용하여 세 번째 드롭 다운의 데이터를 바인딩합니다. 아약스를 적용해야하지만 아약스 전화에 완전히 익숙하다는 것을 알고 있습니다. 내 원하는 데이터가 제 견해에서오고있는 방식으로.

내보기

여기 간다 : - :

<div class="clearfix margin_bottom30"> 
           <div class="form-group"> 
            <label class="col-sm-4 control-label text_left">University</label> 
            <div class="col-sm-8 multiselect_container"> 
             <select class="mutisel" multiple="multiple" value="university_all_list.id" 
               name="universityId" 
               id="userName" required> 
              {% for university_name in university_all_list %} 
               {% if university_name.id == university_list.id%} 

                <option value="{{ university_name.id }}" 
                  selected>{{ university_name.name }}</option> 
               {% else %} 
                <option value="{{ university_name.id }}" 
                >{{ university_name.name }}</option> 
               {% endif %} 
              {% endfor %} 

             </select> 
             <script> 
              $("select.mutisel").multipleSelect({ 
               filter: false, 
               placeholder: "Select", 
              }); 
             </script> 
            </div> 
           </div> 

           <div class="form-group"> 
            <label class="col-sm-4 control-label text_left">User Type</label> 
            <div class="col-sm-8 multiselect_container"> 
             <select class="mutisel" multiple="multiple" value="master_user_types.id" 
               name="masterUserId" 
               id="userName" required> 
              {% for master_user in master_user_types %} 
               {% if master_user.id == university_list.id %} 

                <option value="{{ master_user.id }}" 
                  selected>{{ master_user.userType }}</option> 
               {% else %} 
                <option value="{{ master_user.id }}" 
                >{{ master_user.userType }}</option> 
               {% endif %} 
              {% endfor %} 

             </select> 
             <script> 
              $("select.mutisel").multipleSelect({ 
               filter: false, 
               placeholder: "Select", 
              }); 
             </script> 
            </div> 
           </div> 
           <div class="form-group"> 
            <label class="col-sm-4 control-label text_left">User</label> 
            <div class="col-sm-8 multiselect_container"> 
             <select class="mutisel" multiple="multiple" value="users.id" 
               name="masterUserId" 
               id="userName" required> 
              {% for user in users %} 
                <option value="{{ user.id }}" 
                  selected>{{ users.name }}</option> 
              {% endfor %} 
             </select> 
             <script> 
              $("select.mutisel").multipleSelect({ 
               filter: false, 
               placeholder: "Select", 
              }); 
             </script> 
            </div> 
           </div> 

내가 값 값을 전달하려고 - 당신은 내가 세 개의 드롭 다운 대학, 유저 유형 및 사용자 이름을 지정한 볼 수있는

def send_notification(request): 
    try: 
     university_all_list = Universities.objects.using("cms").all() 
     master_user_types = MasterUserTypes.objects.using("cms").all() 

     university = request.POST.getlist('universityId') 
     masterUser = request.POST.getlist('masterUserId') 
     users = Users.objects.using("cms").filter(userTypeId_id__in=masterUser, universityId_id__in=university) 
     print university 
     print masterUser 
     print users 
     result_for_user =[] 
     for list in users: 
      result_for_user = list 
      print result_for_user.name 

     return render(request, 'templates/push-notification/push_notification.html', 
         {'university_all_list':university_all_list,'master_user_types':master_user_types 
         ,'result_for_user':result_for_user}) 
    except Exception as e: 
     print e 
     raise Http404 

내 html로 여기에 간다 맥락에서 나는 아약스 콜을 통해 어딘가에서 배웠다 ... 실수를 용서했다. 미리 감사드립니다.

Answer 1

세 번째 선택에서 사용할 데이터를 검색하려고합니까? 이 작업을 수행 할 수 있습니다

$.ajax({ 
    url: 'The url to the view', 
    type: 'GET', //Use POST if database modification would occur 
    data: { 
     'first_select': $('#first-select').val(), 
     'second_select': $('#second-select').val() 
    }, 
    success: function(data){ 
      //data contains whatever your view returns. If it's html, then add it to the select directly like $('#select').html(data); but if it's json response, Use it as you wish 
    }, 
    error: function(xhr){ 
     alert(xhr.status + ": " + xhr.responseText); 
    } 
}) 

난 그냥 페이지에 body 태그를 닫기 전에 아닌 페이지 내에서이를 추가하는 것이 좋습니다 것입니다. 상속 한 기본 템플릿에 {% block script %}{% endblock %}을 정의하고 해당 블록을 재정의하여 거기에 스크립트를 추가 할 수 있습니다.