注册

实现一个注册功能

编写 html 内容

　　input 标签

　　csrf_token

　　ajax

路由

视图：

  1. 提供页面
  2. 负责处理业务，返回响应
    1. 接收到   post   请求传递的参数
    2. 写库
    3. 返回  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）的更多相关文章

  1. Java Spring+Mysql+Mybatis 实现用户登录注册功能

    前言: 最近在学习Java的编程,前辈让我写一个包含数据库和前端的用户登录功能,通过看博客等我先是写了一个最基础的servlet+jsp,再到后来开始用maven进行编程,最终的完成版是一个 Spri ...

  2. SSM 实现登录注册功能

    1.上一篇SSM框架搭建好了之后就要开始写功能了,现在来写一个简单的登录注册功能 这几个包是自己手动创建的,然后往里面写代码 2.代码详情 package com.maike.controller; ...

  3. vue koa2 mongodb 从零开始做个人博客(一) 登录注册功能前端部分

    0.效果演示 插入视频插不进来,就很烦.可以出门右拐去优酷看下(点我!). 1.准备工作 1.1前端框架 前端使用了基于vue.js的nuxt.js.为什么使用nuxt.js? 首先我做的是博客的项目 ...

  4. Node.js实现登录注册功能

    使用Node.js + Navicat for mysql实现的登录注册功能 数据库中存在有”user_id,user_name,password,user_img,user_number“字段,其中 ...

  5. Python Django 实现简单注册功能

    Python Django 实现简单注册功能 项目创建略,可参考前期文档介绍. 目录结构如下 编辑views.py from django.shortcuts import render # Crea ...

  6. flask 开发用户登录注册功能

    flask 开发用户登录注册功能 flask开发过程议案需要四个模块:html页面模板.form表单.db数据库操作.app视图函数 1.主程序 # app.py # Auther: hhh5460 ...

  7. JAVAEE_Servlet_20_登录注册功能

    实现登录注册功能 注册功能 import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import j ...

  8. JAVAEE——宜立方商城11：sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求（jsonp）

    1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...

  9. Django项目登录注册系统

    Django项目之个人网站 关注公众号"轻松学编程"了解更多. Github地址:https://github.com/liangdongchang/MyWeb.git 感兴趣的可 ...

随机推荐

  1. Arduino对智能机器人进行简单编程

    Arduino对智能机器人进行简单编程 #include "ESP8266.h" #define TRIG_PIN 5 #define ECHO_PIN A5 #define BE ...

  2. mkdir创建目录时，如果上级目录没有是创建不成功的

    mkdir创建目录时,如果上级目录没有是创建不成功的 ,此时必须用 mkdirs()方法方可.

  3. react 实现tab切换 三角形筛选样式

    ​ ​ 这次使用的是react的class 类组件 import React, { Component } from 'react' import { LeftOutline, SearchOutli ...

  4. jquery autocomplete 插件的使用

    Autocomplete 自动完成 功能:输入框在输入关键字后,根据输入的内容给出相关的下拉框供用户选择,自动完成输入内容. 插件:使用jqueryUI的自动完成小部件,文档地址:https://jq ...

  5. STC8PROG - Linux下的 STC8G STC8H 烧录工具

    STC8PROG - Linux下的 STC8G STC8H 烧录工具 动机 在Linux下用 VSCode + PlatformIO 做开发, 因为VSCode的界面字体代码提示, 以及自定义的类J ...

  6. c/c++一些常用的内置宏

    关于 本文演示环境: win10 + VS2017 Note 市面上的编译器五花八门,但是通常都支持: __DATE__,__FILE__,__LINE__ 和 __TIME__ 这个4个宏 VS20 ...

  7. 【LeetCode】1180. Count Substrings with Only One Distinct Letter 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 组合数 日期 题目地址:https://leetcod ...

  8. 【LeetCode】830. Positions of Large Groups 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...

  9. The Luckiest number（hdu2462）

    The Luckiest number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  10. 1266 - Points in Rectangle

    1266 - Points in Rectangle    PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 3 ...