注册
实现一个注册功能html
编写 html 内容jquery
input 标签ajax
csrf_token数据库
ajaxjson
路由app
视图：post
- 提供页面
- 负责处理业务，返回响应
- 接收到 post 请求传递的参数
- 写库
- 返回 json
需求：判断注册用户是否存在，鼠标失去焦点，触发 ajaxurl
- 接收 get 请求传递的参数
- 判断用户名是否存在
1. 编写 html 页面
包含 input --> 用户填写数据spa
按钮 --> 触发点击事件，发送 ajax 请求code
模板： 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}}" }