django框架--登录注册功能（ajax）
注册
实现一个注册功能
编写 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}}"
}
django框架--登录注册功能（ajax）的更多相关文章
- Java Spring+Mysql+Mybatis 实现用户登录注册功能
前言: 最近在学习Java的编程,前辈让我写一个包含数据库和前端的用户登录功能,通过看博客等我先是写了一个最基础的servlet+jsp,再到后来开始用maven进行编程,最终的完成版是一个 Spri ...
- SSM 实现登录注册功能
1.上一篇SSM框架搭建好了之后就要开始写功能了,现在来写一个简单的登录注册功能 这几个包是自己手动创建的,然后往里面写代码 2.代码详情 package com.maike.controller; ...
- vue koa2 mongodb 从零开始做个人博客(一) 登录注册功能前端部分
0.效果演示 插入视频插不进来,就很烦.可以出门右拐去优酷看下(点我!). 1.准备工作 1.1前端框架 前端使用了基于vue.js的nuxt.js.为什么使用nuxt.js? 首先我做的是博客的项目 ...
- Node.js实现登录注册功能
使用Node.js + Navicat for mysql实现的登录注册功能 数据库中存在有”user_id,user_name,password,user_img,user_number“字段,其中 ...
- Python Django 实现简单注册功能
Python Django 实现简单注册功能 项目创建略,可参考前期文档介绍. 目录结构如下 编辑views.py from django.shortcuts import render # Crea ...
- flask 开发用户登录注册功能
flask 开发用户登录注册功能 flask开发过程议案需要四个模块:html页面模板.form表单.db数据库操作.app视图函数 1.主程序 # app.py # Auther: hhh5460 ...
- JAVAEE_Servlet_20_登录注册功能
实现登录注册功能 注册功能 import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import j ...
- JAVAEE——宜立方商城11：sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求（jsonp）
1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...
- Django项目登录注册系统
Django项目之个人网站 关注公众号"轻松学编程"了解更多. Github地址:https://github.com/liangdongchang/MyWeb.git 感兴趣的可 ...
随机推荐
- Go - 如何编写 ProtoBuf 插件（二）？
目录 前言 定义插件 使用插件 获取自定义选项 小结 推荐阅读 前言 上篇文章<Go - 如何编写 ProtoBuf 插件 (一) >,分享了使用 proto3 的 自定义选项 可以实现插 ...
- TMS570LS3137笔记-内部Flash FEE使用
1.基本简介 TMS570LS3137内部Flash分为三个 Bank,主Flash 数据存储区3MB,是Bank1和Bank2.还有一个Bank7是作为内部Flash模拟EEPROM使用.内部存储器 ...
- WinFrm中多线程操作窗体属性
首先声明一个委托. delegate void SetTextCallback(string text); 然后再写一个事件. private void SetInfo(string text) { ...
- JAVA结合WebSocket实现简单客服聊天功能
说明:该示例只简单的实现了客服聊天功能. 1.聊天记录没有保存到数据库中,一旦服务重启,消息记录将会没有,如果需要保存到数据库中,可以扩展 2.页面样式用的网上模板,样式可以自己进行修改 3.只能由用 ...
- 【LeetCode】1079. Letter Tile Possibilities 解题报告 (C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 回溯 日期 题目地址:https://leetcode ...
- 【LeetCode】688. Knight Probability in Chessboard 解题报告（Python）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址:https://leetcode.com/problems/knight-pr ...
- DevTools 实现原理与性能分析实战
一.引言 从 2008 年 Google 释放出第一版的 Chrome 后,整个 Web 开发领域仿佛被注入了一股新鲜血液,渐渐打破了 IE 一家独大的时代.Chrome 和 Firefox 是 W3 ...
- 小白自制Linux开发板(第二季 V3s篇) 一. 换个核心再来一次
1.前言 大家心心念念(个人认为)的小白自制开发板全新系列正式来了,之前我们使用全志的F1C200s芯片制作了一个小电脑,众所周知,调试很艰难,坑也很多,以至于墨云到现在还是没找到对应的补救方案,为了 ...
- Improving Adversarial Robustness Using Proxy Distributions
目录 概 主要内容 proxy distribution 如何利用构造的数据 Sehwag V., Mahloujifar S., Handina T., Dai S., Xiang C., Chia ...
- 初识JavaScript变量
一.什么是变量? 变量即变化的量,在JS中变量是松散类型的,可以用来保存任何数据类型.把数据取个名字,放在内存中,就称之为变量! 通过变量名可以取到对应数据 二.为什么使用变量? 程序:代码的集合,一 ...