需求:1.用户输入用户名和密码,
2.点击注册按钮时,发送 ajax 的post 请求
3.查询数据库,如果用户名和密码都存在,给出提示信息:用户已存在
不存在的话,向数据库中添加新的用户信息,并提示用户:注册成功
1. 编写 html 页面
包含 input --> 用户填写数据
按钮 --> 触发点击事件,发送 ajax 请求
模板: register.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <script src="/static/js/jquery.min.js"></script> // 导入jquery包 </head> <body> <form action="" method="post"> <input id="username" type="text" name="username" placeholder="用户名"><br> <input id="password" type="password" name="password" placeholder="密码"><span id="msg"></span><br> <input id="register" type="button" value="注册"> </form> <p id="content"></p> <script> $("#register").click( function () { // 获取填写的数据 var username = $("#username").val(); var password = $("#password").val(); // 构建请求的url var url = "/ajaxtest/registerajax/"; // 构建 请求要发送的数据对象 var send_data = { "username":username, "password":password, "csrfmiddlewaretoken":"{{ csrf_token }}" };
// 发送 ajax 请求 $.ajax({ url:url, // 请求的地址 type:"post", // 请求的方式 post data:send_data, // 请求要发送的数据 success:function (data) { // 请求成功,要执行的操作 console.log(data); {#console.log(data["msg"]);#} $("#msg").text(data["msg"]); }, error:function (error) { // 请求失败,要执行的操作 } }) } ) </script> </body> </html>
2.路由
path('register/',register), path('registerajax/',registerajax),
3.视图
# 给密码加密 import hashlib def setPassword(password): md5 = hashlib.md5() ## 实例化一个对象 md5.update(password.encode()) ## 要求传递的是bytes 类型 result = md5.hexdigest() return result # 提供页面 注册 def register(request): return render(request,"register.html") # 处理ajax请求 def registerajax(request): result = {"code":1000,"msg":""} if request.method == "POST": username = request.POST.get("username") password = request.POST.get("password") # 判断是否为空值 if username and password: ## 不为空的情况下,查询数据库 user = Users.objects.filter(name=username,password=setPassword(password)).first() if user: result = {"code":1001,"msg":"用户已存在"} else: # 查询不到数据,向数据库中添加新用户 Users.objects.create(name=username,password=setPassword(password)) result = {"code":1000,"msg":"注册成功"} else: result = {"code":1002,"msg":"用户名或者密码为空"} return JsonResponse(result)
注意:如果路由和视图写在 app 中,
ajax 中的 url 的格式: /子应用的名字/处理ajax请求的路由/