模态框 +ajax

模态框 +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; #设置背景颜色为黑色
width: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))  ，前台可直接进行使用，不需要反序列化。