如何應用ajax獲取下拉數據？

我正在使用django作爲後端來查詢我的結果。就像我有三個下拉菜單，並且在我的視圖中，我使用前兩個下拉菜單中的值來綁定第三個下拉菜單中的數據。我知道我必須申請阿賈克斯，但我完全是新來的阿賈克斯call.By方式我希望的數據在我的意見來了。如何應用ajax獲取下拉數據？

我的觀點放在這裏： -

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放在這裏，你可以看到我有三個下拉命名的大學，用戶類型和用戶： -

<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>

我試圖傳遞值值上下文，但我知道某個地方，它通過ajax電話是可能的...赦免我的錯誤。在此先感謝

來源

2017-05-03 Abi Waqas

您是否嘗試檢索一些數據以在第三個選擇中使用？你可以這樣做：

$.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); 
    } 
})

我建議你添加這個剛剛閉幕頁面上的標記之前，而不是在頁面中。您可以在您繼承的基本模板中定義一些{% block script %}{% endblock %}，並覆蓋該塊以在其中添加腳本。

來源

2017-05-03 21:15:40

如何應用ajax獲取下拉數據？

回答

相關問題