ajax實現簡單登入頁面
阿新 • • 發佈：2020-06-20
本文例項為大家分享了ajax實現簡單登入頁面的具體程式碼，供大家參考，具體內容如下
一.什麼是ajax
Ajax是一種無需重新載入整個網頁，能夠更新部分網頁的技術。
二.ajax的工作原理
Ajax工作原理是一個頁面的指定位置可以載入另一個頁面所有的輸出內容，這樣就實現了一個靜態頁面也能獲取到資料庫中的返回資料資訊了。 所以Ajax實現了一個靜態網頁在不重新整理整個頁面的情況下與伺服器通訊，減少了使用者等待時間，同時降低了網路流量，增強了客戶體驗的友好程度。
三.用ajax實現簡單的登入頁面
1.ajax_login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登入頁面</title>
<style>
.div1{
display: none;
color: red;
}
</style>
<script src="/static/js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$('#register').click(function () {
// alert('ok');
//獲取使用者名稱和密碼:
username = $('#username').val();
password = $('#password').val();
rember = $('#rember').val();
// alert(rember);
$.ajax({
url:"/login_ajax_check",type:"POST",//提交方式
data:{"username":username,"password":password,"rember":rember},dataType:"json",}).done(function (data) {
if (data.res==1){
// alert('username')
location.href="/index" rel="external nofollow"
}else{
// alert('username');
$('.div1').show().html('使用者名稱或密碼輸入錯誤')
}
})
});
});
</script>
</head>
<body>
<div>
使用者名稱:<input type="text" id="username" ><br/>
記住使用者名稱:<input type="checkbox" id="rember"><br/>
密碼<input type="password" id="password"><br/>
<input type="submit" value="登入" id="register">
<div class="div1"></div>
</div>
</body>
</html>2.views.py
from django.http import HttpResponse,JsonResponse
def login_ajax(request):
"""ajax登入頁面"""
return render(request,"booktest/login_ajax.html")
def login_ajax_check(request):
"""ajax登入校驗"""
username = request.POST.get('username') # 通過'username'這個鍵拿到資料
password = request.POST.get('password')
#若登入正確
if username == "admin" and password == "12":
jsonresponse = JsonResponse({"res":1})
return jsonresponse
#登入錯誤:
else:
return JsonResponse({"res":0})以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。