如何应用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获取下拉数据？

回答

相关问题