输入账号密码,进行ajax请求,成功调转其他页面,失败在登陆后显示错误信息。
urls.py
from django
.contrib
import admin
from django
.urls
import path
from app01
import views
urlpatterns
= [
path
('admin/', admin
.site
.urls
),
path
('index/',views
.index
),
path
('login/',views
.login
),
]
views.py
简单模拟,不使用数据库
from django
.shortcuts
import render
,HttpResponse
import json
def index(request
):
return render
(request
,'index.html')
def login(request
):
print(request
.POST
)
user
= request
.POST
['user']
password
= request
.POST
['password']
res
= {'user':None,'msg':None}
if user
== 'admin' and password
== '123456':
res
['user'] = user
else:
res
['msg'] = 'username or password wrong !'
return HttpResponse
(json
.dumps
(res
))
index.html
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<title
>Title
</title
>
<script src
="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script
>
</head
>
<body
>
<form
>
用户名
<input type="text" id="user">
密码
<input type="password" id="password">
<input type="button" value
="登录" class="login_btn"><span
class="error"></span
>
</form
>
</body
>
<script
>
//登录验证
$
('.login_btn').click
(function
() {
$
.ajax
({
url
:'/login/',
type:'post',
data
:{
'user':$
("#user").val
(),
'password':$
("#password").val
(),
},
success
:function
(data
) {
console
.log
(data
);//json字符串
console
.log
(typeof data
);
var data
= JSON
.parse
(data
); //反序列化
console
.log
(data
);//json字符串
console
.log
(typeof data
);
if (data
.user
){
location
.href
='https://www.mi.com/'
}else {
$
('.error').html
(data
.msg
).css
({'color':'red','margin-left':'10px'})
}
}
})
})
</script
>
</html
>
结果(错误输入)
注意: 怎样将Python的数据传递给js使用是一个非常重要的知识点。 两种语言都支持json,在Python中json的格式就像是字典一样,但是在js中,json格式要经过反序列化转为object类型,才能被灵活的使用。 所以利用Python中的json.dumps()方法,将字典类型的数据序列化为字符串传递到js中,js中JSON.parse()方法,将数据反序列化为object类型的数据,如果Python中序列化的数据为列表类型,js反序列化为数组类型。
view.py序列化数据
index.html反序列化数据