一、URL配置：
# 用户登陆列表 # 用户登陆 url(r'login/', views_study.study_login, name='study_login'), #views.login, name='login'), url(r'^study/login/', views_study.study_login, name='study_login'), url(r'^study/username/', views_study.study_username, name='study_index'), # 用户退出 url(r'logout/', views.logout, name='logout'), # 密码修改 url(r'password_change/', views.password_change, name='password_change'),
二、前端网页内容：
<html lang="en"><head> <meta charset="utf-8"> <link rel="icon" href="/static/images/favicon.ico"> <title>运维管理平台登陆</title> <link href="/static/css/simple-line-icons.css" rel="stylesheet"> <link href="/static/css/style.css" rel="stylesheet"></head><body class="app flex-row align-items-center"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-5 card card-group card-block"> <!--form class="center" method="post"> <!--建立一个用于登陆的form表单 %csrf_token%--> <h1 class="text-center">jq运维管理平台登陆</h1> <p class="text-muted text-center">请输入你的帐号和密码!</p> <div class="input-group mb-1"> <span class="input-group-addon"><i class="icon-user"></i> </span> <input id="username" maxlength="254" type="text" class="form-control" placeholder="用户名"/> </div> <div class="input-group mb-2"> <span class="input-group-addon"><i class="icon-lock"></i> </span> <input id="password" type="password" class="form-control" placeholder="密码" /> </div> <button id="login" type="submit" class="btn btn-primary px-2"><i class="icon-key"></i>登录</button> <!--/form--> </div> </div> </div><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/static/js/libs/jquery.min.js"></script><script > $.ajaxSetup({ data: {csrfmiddlewaretoken: '{{ csrf_token }}' }, }); function Login() { var username=$('#username').val(); var password=$('#password').val(); //var csrfmiddlewaretoken = $("input[name='csrfmiddlewaretoken']").val();{# 调用ajax提交数据 #} $.ajax({ url:"/login/", data:{"username": username, "password": password}, type:'POST', success:function(data){ data=JSON.parse(data) if(!data.status){ alert(data.content); return false; } else { location.href="/study/username/" //跳转 } } }); } $(function() { document.getElementById("login").onclick = function () { Login(); } })</script></body></html>三、后端网页内容：
def study_login(request): print ("study_login访问时间点：%s" %datetime.now().strftime("%Y-%m-%d %H:%M:%S.%f")) if request.method == 'POST': username = request.POST.get('username') password = request.POST.get('password') user = authenticate(username=username, password=password) if user is not None: # pass authtencation login(request, user) return HttpResponse(json.dumps({ "status": 200, })) else: return HttpResponse(json.dumps({ "content": "用户名或者密码不匹配，请检查.....", })) else: return render(request, 'study/login_jquery.html')四、效果图：
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃，即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得
100積分直接送
付費(fèi)專(zhuān)欄免費(fèi)學(xué)
大額優(yōu)惠券免費(fèi)領(lǐng)