javascript - 如何应用ajax获取下拉列表中的数据？

Question

我使用 django 作为后端来查询我的结果。就像我有三个下拉列表一样，在我的 View 中，我使用前两个下拉列表中的值来绑定(bind)第三个下拉列表中的数据。我知道我必须应用 ajax，但我对 ajax 调用完全陌生。顺便说一下，我想要的数据正在我的 View 中。

我的观点在这里:-

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 在这里你可以看到我有三个名为 University、userType 和 users 的下拉菜单:-

<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调用...请原谅我的错误。提前致谢

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

我建议您在关闭页面上的正文标记之前添加此内容，而不是在页面内添加此内容。您可以在继承的基本模板中定义一些 {% block script %}{% endblock %} 并覆盖该 block 以在其中添加脚本。