解決した

ドロップダウンでデータを取得するためにajaxを適用するには?

フロントエンド

私はバックエンドとしてdjangoを使用して私の結果を照会しています。私は3つのドロップダウンを持ち、私のビューで私は3番目のドロップダウンでデータをバインドするために最初の2つのドロップダウンの値を使用しています。 私はajaxを適用する必要があることを知っていますが、私は全く新しい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はあなたが私が3つのドロップダウン大学、userTypeとユーザーを持っていることがわかりますここに行く:

<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呼び出し...ポージング可能であることを学んだ私の間違いのために赦免。 前もって感謝します


Progress 100%

一番いい

回答

フロントエンド

3番目の選択で使用するデータを取得しようとしていますか? あなたはこれを行うことができます:

$.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 %}を定義し、そこにスクリプトを追加するためにブロックを上書きすることができます。