效果图:
弹框
为空提交
不为空提交
取消
更多在js那块
//增加公告
function addnote(){
layer.open({
type: 1,
title:["新增升级公告"],
skin: 'layui-layer-demo',
area: ['600px', '360px'],
shadeClose: true,
content: '',
btn:["确定","取消"],
btn1:function(){
var notes=document.getElementById("noteinfo").value;
$.ajax({
cache:false,
type:"POST",
url:"/addnote/",
data:{'info':notes},
async:true,
beforeSend:function(xhr,settings){
xhr.setRequestHeader("X-CSRFToken","{{csrf_token}}");
},
success:function(data){
if(data.notecode=="success"){
window.layer.closeAll();
layer.msg("提交成功",{
time:1000
},function(){
window.location.reload();
});
}else{
layer.msg("提交失败");
}
}
})
},
btn2:function(){
layer.msg("取消成功");
return true;
},
});
};
分析:
新增添加onclick事件,弹框layer.open
后面就是对应layer属性
btn1、btn2对应事件
ajax请求服务端接口 传输入框的内容值
layer.msg 提示信息3s后自动消息,
记得最后要刷新列表页面window.location.reload();这样列表才会显示最新的数据
另外就是接口那块
urls.py的url(r"^addnote/",views.addnote,name="addnote"),#添加公告
views.py的添加公告接口如下
@csrf_exempt
def addnote(request):
uname=request.session.get("username","")
user_exist=bkuser.objects.filter(bkuser_name=uname)
admin_exist=bkadmin.objects.filter(bkadmin_name=uname)
if user_exist:
return redirect("/")
elif admin_exist:
if request.method=="POST":
noteinfo=request.POST.get("info")
if noteinfo:
upgradeset.objects.get_or_create(upgrade_note=noteinfo)
return HttpResponse('{"notecode":"success"}',content_type='application/json')
else:
return HttpResponse('{"notecode":"fail"}',content_type='application/json')
else:
return redirect("/bosslogin/")
返回数据json格式