实现一个注册功能

编写 html 内容

　　input 标签

　　csrf_token

　　ajax

路由

视图：

1. 提供页面
2. 负责处理业务，返回响应

需求：判断注册用户是否存在，鼠标失去焦点，触发 ajax

• 接收 get 请求传递的参数
• 判断用户名是否存在

1. 编写 html 页面

包含  input --> 用户填写数据

　　 按钮 --> 触发点击事件，发送 ajax 请求

模板： register.html

1
2 3 4 5 6 7 8 9

10
11
12 13 14

15

16 17 18 73 74 75 76

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
2 3 4 5 6 7 8 9
10
11 12

13 14 15 40 41 42 43

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 写法跟 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}}"
}