注冊
實現一個注冊功能
編寫 html 內容
input 標簽
csrf_token
ajax
路由
視圖：
- 提供頁面
- 負責處理業務，返回響應
- 接收到 post 請求傳遞的參數
- 寫庫
- 返回 json
需求：判斷注冊用戶是否存在，鼠標失去焦點，觸發 ajax
- 接收 get 請求傳遞的參數
- 判斷用戶名是否存在
1. 編寫 html 頁面
包含 input --> 用戶填寫數據
按鈕 --> 觸發點擊事件，發送 ajax 請求
模板： register.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>注冊</title> 6 <script src="/static/js/jquery.min.js"></script> 7 </head> 8 <body> 9 <form action="" method="post"> 10 <input id="username" type="text" name="username" placeholder="用戶名"><span id="msguser" style="color: red"></span><br> 11 <input id="password" type="password" name="password" placeholder="密碼"><span id="msg"></span><br> 12 <input id="register" type="button" value="注冊"> 13 14 </form> 15 <p id="content" style="color: red"></p> 16 17 18 <script> 19 $("#register").click( 20 function () { 21 // 獲取填寫的數據 22 var username = $("#username").val(); 23 var password = $("#password").val(); 24 // 構建請求的url 25 var url = "/ajaxtest/registerajax/"; 26 // 構建 post請求的數據對象 27 var send_data = { 28 "username":username, 29 "password":password, 30 "csrfmiddlewaretoken":"{{ csrf_token }}" 31 }; 32 $.ajax({ 33 url:url, // 請求的地址 34 type:"post", // 請求的方式 post 35 data:send_data, // 請求要發送的數據 36 success:function (data) { 37 // 請求成功，要執行的操作 38 console.log(data); 39 {#console.log(data["msg"]);#} 40 $("#msg").text(data["msg"]); 41 }, 42 error:function (error) { 43 // 請求失敗，要執行的操作 44 } 45 }) 46 } 47 ) 48 49 // 需求：判斷注冊用戶是否存在，鼠標失去焦點，觸發 ajax 50 $("#username").blur( 51 function () { 52 // 獲取數據 53 var username = $("#username").val(); 54 // 構建url get請求將參數拼接在請求路徑上 55 var url = "/ajaxtest/checkusers/?username=" + username; 56 $.ajax({ 57 url:url, 58 type:"get", 59 data:"", // 請求要發送的數據 常在post請求中使用，get請求只需要拼接請求的url就可以 60 success:function (data) { 61 console.log(data); 62 $("#msguser").text(data["msg"]); 63 }, 64 error:function (error) { 65 66 } 67 }) 68 } 69 ) 70 71 72 </script> 73 74 75 </body> 76 </html>
2.路由
path('register/',register), path('registerajax/',registerajax), path('checkusers/',checkusers),
3.視圖
1 # 提供頁面 注冊 2 def register(request): 3 return render(request,"register.html") 4 5 # 處理ajax請求 6 def registerajax(request): 7 result = {"code":1000,"msg":""} 8 if request.method == "POST": 9 username = request.POST.get("username") 10 password = request.POST.get("password") 11 # 判斷是否為空值 12 if username and password: ## 不為空的情況下，查詢數據庫 13 user = Users.objects.filter(name=username,password=setPassword(password)).first() 14 if user: 15 result = {"code":1001,"msg":"用戶已存在"} 16 else: 17 # 查詢不到數據，向數據庫中添加新用戶 18 Users.objects.create(name=username,password=setPassword(password)) 19 result = {"code":1000,"msg":"注冊成功"} 20 else: 21 result = {"code":1002,"msg":"用戶名或者密碼為空"} 22 return JsonResponse(result) 23 # 判斷注冊用戶是否存在 24 def checkusers(request): 25 res = {"code":2000,"msg":""} 26 username = request.GET.get("username") 27 if username: 28 user = Users.objects.filter(name=username).first() 29 if user: 30 res = {"code":2000,"msg":"用戶名存在"} 31 else: 32 res = {"code":2001,"msg":"用戶不存在"} 33 else: 34 res = {"code":2002,"msg":"請輸入用戶名"} 35 return JsonResponse(res)
注意：如果路由和視圖寫在 app 中，
ajax 中的 url 的格式： /子應用的名字/處理ajax請求的路由/
登錄
1.模板
login.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>登錄</title> 6 <script src="/static/js/jquery.min.js"></script> 7 </head> 8 <body> 9 <input id="username" type="text" name="username" placeholder="用戶名"><br> 10 <input id="password" type="password" name="password" placeholder="密碼"><br> 11 <input id="login" type="submit" value="登錄"> 12 <p id="content" style="color: red"></p> 13 14 15 <script> 16 $("#login").click( 17 function () { 18 // 獲取用戶填寫的數據 19 var username = $("#username").val(); 20 var password = $("#password").val(); 21 // 構建 url get請求參數 拼接在url后面 22 var url = "/ajaxtest/loginajax/?username=" + username + "&password=" + password; 23 $.ajax({ 24 url:url, 25 type:"get", 26 data:"", 27 success:function (data) { 28 console.log(data); 29 $("#content").text(data["msg"]); 30 }, 31 error:function (error) { 32 33 } 34 }) 35 } 36 ) 37 38 39 </script> 40 41 42 </body> 43 </html>
2.路由
path('login/',login),
path('loginajax/',loginajax),
3.視圖
1 # 登錄 2 def login(request): 3 return render(request,"login.html") 4 # 處理請求，返回響應 5 def loginajax(request): 6 result = {"code":1000,"msg":""} 7 username = request.GET.get("username") 8 password = request.GET.get("password") 9 if username and password: 10 user = Users.objects.filter(name=username,password=setPassword(password)).first() 11 if user: 12 result = {"code":1000,"msg":"登錄成功"} 13 else: 14 result = {"code":1001,"msg":"用戶名或者密碼輸入錯誤"} 15 else: 16 result = {"code":1002,"msg":"用戶名或者密碼為空"} 17 return JsonResponse(result)
ajax post請求
模板 ajax 寫法跟 get 請求不一樣
- 構建路由
- get 需要將參數拼接到 請求 url 中
- post 請求需要構建一個 數據對象
- 包含：請求參數
- csrf_token
get
// 構建請求的 url
var url = "/ajaxtest/login/?username="+username+"&password="+password;
post
//構建 post請求的數據對象 var send_data = { "username":username, "password":password, "csrfmiddlewaretoken":"{{csrf_token}}" }