django界面上彈出bootstrap modal對話框，對話框中包含iframe並請求一個新的頁面

1、首先，需求是這樣的，點擊編輯學生信息的操作，彈出個添加學生課程的對話框，在對話框中需要一個選擇學生課程的輸入框，點擊時，彈出選擇課程的對話框幷包含iframe，這個iframe是請求一個view的get方法，獲取到課程列表的數據，返回一個頁面，選擇完後，再把數據返回給對話框裏學生課程的輸入框，也就是學生選擇課程的一個操作，這些通通在一個頁面完成。

2、這裏主要附上如何彈出個選擇課程列表的對話框，課程對話框中包含一個iframe的相關代碼，具體的要看業務需求進行修改操作。

（1）、首先，附上選擇課程的對話框代碼，裏面包含了一個iframe：

<!-- 選擇課程列表對話框 -->
<div class="modal fade" id="stuClassModal" tabindex="-1" role="dialog" aria-labelledby="stuClassModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="stuClassModalLabel">選擇課程</h4>
            </div>
            <iframe id="stu_class_iframe" class="col-md-12 box-inner" style="height: 600px"></iframe>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>

（2）、上面的對話框要彈出來，還有iframe的src需要指定，也就是我們在點擊選擇學生課程輸入框時觸發的操作，js代碼如下，其中需要獲取到選擇學生課程列表的所請求的url，並且指定src，並打開這個對話框：

var stu_class_change = function (e, row_flag) {
    var sel_class_url = $("#sel_class_url").val();
    $("#stu_class_iframe").attr("src", sel_class_url + '?row_flag=' + row_flag);
    $("#stuClassModalLabel").text("選擇課程");
    $("#stuClassModal").modal();
}

（3）、其中sel_class_url是用表單隱藏域來添加的，代碼如下：

<input type="hidden" id="sel_class_url" value="{% url 'stu:class_sel' %}">

（4）、其中url配置的路徑我就不寫出來了，請求的view邏輯，get方法主要是獲取到課程列表的數據，並顯示出一個新的頁面，這個頁面就是上面iframe顯示的頁面，post方法主要是選擇一個課程後，返回選擇課程的數據，後面跟界面js做交互：

class SelClassView(View):
    def get(self, request):
        # 獲取分頁參數以及查詢參數
        index = request.GET.get('index')  # 頁碼
        limit = request.GET.get('limit', 5)  # 分頁條數
        row_flag = request.GET.get('row_flag')
        stu_class_name = request.GET.get('stu_class_name', '')
        class_list = StuClass.objects.all()
        if stu_class_name:
            class_list = StuClass.objects.filter(classname__contains=stu_class_name)
        page, page_range = page_util(class_list, limit, index)  # 分頁
        query = {'name': stu_class_name}
        content = {'page': page, 'page_range': page_range, 'query': query, 'row_flag': row_flag}
        return render(request, 'stu/select_class.html', content)

    def post(self, request):
        try:
            class_chk = request.POST.get('class_chk')  # 選中的課程：格式 課程id_課程名稱_課時
            class_chk_arr = corp_chk.split('_')  # 分割
            class_id = class_chk_arr[0]  # 課程id
            class_name = class_chk_arr[1]  # 課程名稱
            class_time = class_chk_arr[2]  # 課時
            return JsonResponse({'code': RET.OK, 'msg': '選擇課程成功', 'class_id': class_id, 'class_name': class_name, 'class_time': class_time})
        except Exception as e:
            return JsonResponse({'code': RET.DATAERR, 'msg': '選擇課程失敗'})

（5），其中select_class.html主要代碼如下，主要是一個表格數據，單選框選擇數據，點擊確定按鈕，通過ajax請求上面第四步的post方法，將獲取到的數據返回給頁面：

<form id="sel_class_form" action="{% url 'stu:class_sel' %}" method="post">
    {% csrf_token %}
    <table class="table table-bordered table-hover">
        <thead class="bg-thead">
        <tr>
            <th width="10%">選擇</th>
            <th>課程名稱</th>
            <th>課時</th>
        </tr>
        </thead>

        <tbody id="tbody">
        {% for item in page %}
            <tr onclick="tr_click_checked('index_{{ item.classid }}')">
                <td><input type="radio" id="index_{{ item.classid }}" name="class_chk"
                           value="{{ item.classid }}_{{ item.classname }}_{{ item.classtime }}"
                           {% ifequal item.classname query.name %}checked{% endifequal %}></td>
                <td style="text-align: left">{{ item.classname|default:'' }}</td>
                <td style="text-align: left">{{ item.classtime|default:'' }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</form>

    <div class="col-md-12 text-right">
        <button class="btn btn-success" type="button" onclick="class_form_submit('sel_class_form', {{ row_flag }})"/>確定
    </div>

/** 選擇課程提交表單驗證 */
var class_form_submit = function (form_id, row_flag) {
    var val = $('input[name="class_chk"]:checked').val();   // 獲取選中單選框
    if (val === undefined || val === '') {
        toastr.warning('請選擇課程');
        return false;
    } else {
        var form = $("#" + form_id);
        $.ajax({
            cache: false,
            type: form.attr('method'),
            url: form.attr('action'),
            async: true,
            data: form.serialize(),
            headers: {
                "X-CSRFToken": $.cookie("csrftoken")
            },
            success: function (resp) {
                if (resp.code == "200") {
                    window.parent.$('#class_id' + row_flag).val(resp.class_id)
                    window.parent.$('#class_name' + row_flag).val(resp.class_name)
					window.parent.$('#class_time' + row_flag).val(resp.class_time)
                    window.parent.$('#stuClassModal').modal('hide');
                } else {
                    alert(resp.msg);
                }
            },
            error: function () {
                alert('error：請求失敗');
            }
        });
    }
};

3、以上內容僅供大家，學習參考，謝謝！