一、AJAX(異步請求)
有的時候我們必須點擊提交頁面才告訴我們用戶名重複,這樣很影響用戶體驗,所以我們應當在輸入密碼的時候就要告訴我們用戶名已存在
我們需要使用ajax(ajax:jquery 是一種靜態資源),不需要我們提交當我們輸入密碼的時候就可以告訴我們用戶名存在
1.什麼是AJAX?
AJAX=異步JavaScript 和XML
AJAX是一種用於創建快速動態網頁的技術.通過在後臺與服務器進行少量數據交接,AJAX可以使用網頁實現異步更新,這意味着可以在重新加載整個網頁的情況下,對網頁的某部分進行更新
傳統網頁(不適用AJAX)如果需要更新內容,必須重新加載整個網頁
有很多使用AJAX的應用程序案例:新浪微博,Google地圖,開心網等等
2.我們需要jquery文件,可以去官網下載,我是用的是jquery-3.3.1,我們在exercise裏面創建一個static的文件夾,接着又在裏面創建以js的文件夾把我們的jquery-3.3.1放進去
3.接着我們需要在setting.py裏面添加我們的ststic文件進行 配置
4.接着我們運行項目在瀏覽器地址欄輸入
http://127.0.0.1:8000/static/js/jquery-3.3.1.min.js結果爲
說明我們可以使用jquery文件了
5.我們在register.html中加上javascript
JSON基礎結構：
JSON結構有兩種結構：
json簡單說就是javascript中的對象和數組，所以這兩種結構就是對象和數組兩種結構，通過這兩種結構可以表示各種複雜的結構。
對象：對象在js中表示爲“{}”括起來的內容，數據結構爲 {key：value,key：value,...}的鍵值對的結構，在面向對象的語言中，key爲對象的屬性，value爲對應的屬性值，所以很容易理解，取值方法爲 對象.key 獲取屬性值，這個屬性值的類型可以是 數字、字符串、數組、對象幾種。
數組：數組在js中是中括號“[]”括起來的內容，數據結構爲 ["java","javascript","vb",...]，取值方式和所有語言中一樣，使用索引獲取，字段值的類型可以是 數字、字符串、數組、對象幾種。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("input[name='username']").blur(function () {
//通過彈框來驗證代碼是否成功 alert(username) 丟失光標瀏覽器彈框
var username=$("this").val();
//通過彈框驗證alert(token) 丟失光標彈框 name的key從瀏覽器代碼工作區中查找
var token=$("input[name='csrfmiddlewaretoken']").val();
//django 中每一個表單請求都需要一個key
//接下來將請求發送到後臺
//格式 (1.請求路徑 2.參數 3.回調函數(返回後執行函數))
//json格式
data={"uername":username,"csrfmiddlewaretoken":token};
$.post('hasName',data,function(bdata){
//標籤中添加文字
$("#msg").html(bdata);
})
});
})
</script>
</head>
<body>
<form method="post" action="/user/register">
{% csrf_token %}
<p>
{{ error }}
</p>
<p>
用戶名:<input value="{{blog.userName}}" type="text" name="username"><span id="msg"></span>
</p>
<p>
密碼:<input type="password" name="upw">
</p>
<p>
<input type="submit" value="註冊">
</p>
</form>
</body>
</html>6.在這寫完之前我們需要在views.py定義一個hasName(),同時需要導入HttpResponse模塊,用來判斷用戶名有沒有重複,同時在頁面中顯示提示信息
7.然後我們在blog_user\urls.py配置一下路徑
#usr/bin/python
#-*-coding:utf-8-*-
from django.urls import path
from zhaofan_user import views
app_name='user'
urlpatterns = [
path('register',views.register),
path('welcome/<int:id>/',views.welcome,name='welcome'),
path('hasName',views.hasName),
]最後進入瀏覽器輸入已有的姓名不點擊提交顯示
可以再審覈代碼network區域查看運行
輸入沒有的姓名不點擊提交顯示
二、登錄功能
如果用戶已經註冊過賬號,那麼就需要一個超鏈接轉到登錄頁面進行登錄,用戶名密碼正確進入歡迎界面,如果用戶名密碼錯誤,報出錯誤重新登錄
1.我們先在templates文件下的user中創建登錄頁面的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post" action="/user/login">
{% csrf_token %}
用戶名:<input type="text" name="uname"><span>{{ error }}</span><br>
密 碼:<input type="password" name="upwd"><br>
<input type="submit" value="登錄">
</form>
</body>
</html>2.接着在views.py中創建登錄的函數login()
#登錄
def login(request):
#接收到get請求進入登錄頁面
if request.method == 'GET':
return render(request, 'user/login.html', {})
#點擊登陸後接收到post請求
elif request.method == 'POST':
unname=request.POST.get('uname')
upwd=request.POST.get('upwd')
bloguser = BlogUser.objects.filter(userName=unname,passWord=upwd)
#過濾數據庫名字得到結果集 如果結果集長度用戶名密碼正確進入歡迎頁面返回用戶名id獲取用戶名
if len(bloguser) == 1:
return redirect(reverse('user:welcome',args=[bloguser[0].id]))
#過濾數據庫如果沒有結果再一次進入登錄界面 並顯示用戶名或密碼錯誤
else:
return render(request,'user/login.html',{"error":"用戶名或密碼錯誤"})3.接着在在blog_user\urls.py配置路徑
# usr/bin/python
# -*-coding:utf-8-*-
from django.urls import path
from blog_user import views
app_name = 'user'
urlpatterns = [
path('register', views.register),
path('welcome/<int:id>/', views.welcome, name='welcome'),
path('hasName',views.hasName),
path('login',views.login),
]
4.進入瀏覽器頁面
點擊已有賬戶登錄
輸入正確密碼
輸入錯誤密碼
