day12-升级登录案例
2020-01-31 本文已影响0人
wenyilab
升级登录案例（ajax）
ajax：异步的javascript
在不重新加载页面的情况下，对页面进行局部刷新。
$.ajax({
'url':请求地址
'type':请求方式
'dataType':预测返回的数据格式
'data':参数
}).success(function(data){
# 回调函数
})
1、ajax测试
a）设置url
url(r'^test_ajax$',views.ajax_test),
url(r'^ajax_handle$',views.ajax_handle),
b）视图函数
def ajax_test(request):
return render(request, 'booktest/test_ajax.html')
def ajax_handle(request):
'''ajax请求处理'''
# 返回json数据 {'res':1}
return JsonResponse({'res': 1})
c）测试ajax页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<script src="/static/js/jquery.min.js"></script>
<script>
$(function () {
// 绑定btmAjax的click事件
$('#btnAjax').click(function () {
$.ajax({
'url':'/ajax_handle',
'dataType':'json',
}).success(function (data) {
//进行处理
if(data.res == 1){
$('#message').show().html('提示信息')
}
})
})
})
</script>
<style>
#message {
display: none;
color: red;
}
</style>
</head>
<body>
<input type="button" id= "btnAjax" value="ajax请求">
<div id="message"></div>
</body>
</html>
2、ajax登录
首先分析出访问地址所需要携带的参数。
视图函数处理完成之后所返回的json格式。
1）显示登录页面
a）设计url，通过浏览器访问http://127.0.0.1:8000/login_ajax 登录页面
url(r'^login_ajax$',views.login_ajax)
b）设计url对应的视图函数login_ajax
def login_ajax(request):
'''显示ajax登录页面'''
return render(request,'booktest/login_ajax.html')
c）编写模版文件login_ajax.html，在里面写jquery代码发起ajax请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax登录页面</title>
<script src="/static/js/jquery.min.js"></script>
<style>
#errmsg{
display: none;
color:red;
}
</style>
</head>
<body>
<!--POST：提交的参数在请求集中 数据安全性要求比较高-->
<!--GET：提交的参数在url中-->
<div>
用户名：<input type="text" id="username" ><br/>
密码：<input type="password" id="password" ><br/>
<input type="button" id='btnLogin' value="登录">
<div id="errmsg"></div>
</div>
<script>
$(function () {
$('#btnLogin').click(function () {
// 1、获取用户名和密码
username = $('#username').val()
password = $('#password').val()
console.log(username, "#####")
console.log(password, "#####")
// 2、发起post ajax请求，/login_ajax_check
$.ajax({
'url': '/login_ajax_check',
'type': 'post',
'data': {'username':username, 'password':password},
'dataType': 'json',
success: function (data) {
// 进行处理
if (data.res == 0) {
// 登录失败，返回{'res':0}
$('#errmsg').show().html('用户名或密码错误')
} else {
// 登录成功，返回{'res':1}
location.href = '/index'
}
}
})
})
})
</script>
</body>
</html>
2）登录校验功能
a）设计url，点击登录页的登录按钮发起请求http://127.0.0.1:8000/login_ajax 时进行校验
url(r'^login_ajax_check',views.login_ajax_check)
b）设计url对应的视图函数
#/login_ajax_check
def login_ajax_check(request):
'''ajax登录校验'''
# 1、获取用户名和密码
username = request.POST.get('username')
password = request.POST.get('password')
print(username,password)
# 2、进行校验，返回json数据
if username == 'smart' and password == '123':
# 用户名和密码正确
return JsonResponse({'res':1})
else:
# 用户名或密码错误
return JsonResponse({'res':0})
c）校验成功，跳转首页，失败，进行提示
3）效果图
校验失败
校验成功
