Django—ajax登录案例
今天学习了Django的时候做登录案例遇到的情况:
在Django中如果没有关闭crsf验证直接做表单提交类的会错。
登录页面前端代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<script src="static/js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$('#btn').click(function () {
//获取用户名和密码
$username = $('#username').val()
$password = $('#password').val()
// 发起ajax请求
$.ajax({
'url': '/login_check',
'type': 'post',
'data': {'username': $username, 'password': $password},
'dataType': 'json'
}).success(function (data) {
if(data.res == 1) {
location.href = '/index'
}
else
{
$('#msg').show().html('用户名或者密码错误')
}
})
})
})
</script>
<style>
#msg{
display: none;
color:red;
}
</style>
</head>
<body>
<div>
用户名:<input type="text" id="username" ></br>
密码:<input type="password" id="password" ></br>
<input type="button" value="登录" id="btn">
<div id="msg"></div>
</div>
</body>
</html>
下面是views.py的处理函数:
def login(request):
'''显示登录页面'''
return render(request,'booktest/login.html')
def login_check(request):
'''验证账号密码'''
# 1.获取用户名密码
username = request.POST.get('username')
password = request.POST.get('password')
# 2. 验证用户名密码
if username == '123' and password == '123':
# 3. 返回页面
return JsonResponse({'res':1})
else:
return JsonResponse({'res':0})
在账号密码错误时,通过ajax发送请求,实现局部刷新。而不是整体访问一次登录页面。