模态框 +ajax 的创建
模态框作用：让浏览器中心有个小窗口，用于对原来网页的更改。
ajax作用：用于对前台产生的数据，发送到后台，并且不用更新界面。
模态框的构成：有三层构成，第一层原网页的窗口，第二层在网页中间有阴影层，主要用于凸显第三层，第三层用于对数据部分的更改窗口。
第一步：模态框的构建
阴影层
.shadow{
background-color: black; #设置背景颜色为黑色
height: 1000px; #高度只要大于网页窗口
position: fixed; #生成绝对定位的元素，相对于浏览器窗口进行定位，固定的作用。
top: 0;
left: 0;
right: 0;
bottom: 0; #完全覆盖网页
opacity: 0.4; #设置块的透明度
z-index: 999; #z-index 属性设置元素的堆叠顺序,可以为负， 仅能在定位元素上奏效（例如 position:absolute;），数字小的在小层！
display:none #是否显示
}
最上文本层
.content{
background-color: white; #设置背景颜色为黑色
500px; #宽度500像素
height: 300px; #高度300像素
position: fixed; #绝对定位
top: 100px;
left: 500px;
right: 200px; #在页面显示的位置。
z-index: 1000; #大于shadow的数字，会显示在上层
display:none #默认不显示
}
html框架：
阴影层：
<div class="shadow"></div>
文本层：（最上层）
<div class="content">
班级名: <input type="text" name="classname" id="classname">
<input type="button" value="提交" id="tijiao">
<input type="button" id="cancel" value="取消">
<span id="error"></span>
</div>
显示： $('#btn').click(function () {
$(".shadow").show();
$(".content").show();
});
$('#cancel').click(function () {
$(".shadow").hide();
$(".content").hide();
});
$('.ajax_class_modal').click(function () {
$('.editshadow, .editcontent').show();
第二部：
关于ajax的数据传输。
ajax数据传输的内容格式：
向后端所发的数据内容：
$ajax({
type:"POST", #发送类型
url："/ajax_up_classes", #方式送的url地址
data:{"classname":classname,"classid":classid}, #携带的发送数据
success:function(data){
console.log(data) 返回的数据放到data,是一个字符串。
}
数据的传输一般都是使用json格式。
数据传输的方式:
前台：反序列化;
// js反序列化:
console.log(data);
res = JSON.parse(data);
#前端序列化
JSON.stringify(字典)
后端：我们可以import json包
将字典序列化通过HttpResponse把数据发回去。
或者
return JsonResponse((res)) 直接可以将字典转化为字符串发回去。
通过JsonResponse((res)) ，前台可直接进行使用，不需要反序列化。