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、以上内容仅供大家，学习参考，谢谢！