前端代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>登录</title>

    <script src="/static/jquery-3.3.1.min.js"></script>

    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">

</head>

<body>

<div class="container-fluid box">

    <h1></h1>

    <div class="row">

        <div class="col-md-4 col-md-offset-4">

            <div class="panel panel-primary">

                <div class="panel-heading">

                    <h3 class="panel-title">Loging</h3>

                </div>

                <div class="panel-body">

                    {# label for="name"  如果指定某个id,这样点击这个label,焦点会到对应的控件上         #}

                    <form>

                        {% csrf_token %}

                        <div class="form-group">

                            <label for="name">用户名</label>

                            <input type="text" id="name" class="form-control">

                        </div>

                        <div class="form-group">

                            <label for="pwd">密码</label>

                            <input type="password" id="pwd" class="form-control">

                        </div>

                        <div class="form-group">

                            <label for="valid_code">验证码</label>

                            <div class="row">

                                <div class="col-md-6">

                                    <input type="text" id="valid_code" class="form-control">

                                </div>

                                <img height="35" width="260" src="/get_valid_code/" alt="">

                            </div>

                        </div>

                        {#                        <input type="button" value="登录" class="btn btn-primary pull-right" id="btn">#}

                    </form>

                    <input type="button" value="登录" class="btn btn-primary pull-right" id="btn">

                </div>

            </div>

        </div>

    </div>

</div>

</body>

<script>

    $('#btn').hover(function () {

        var valid_code = $('#valid_code').val();

        if (valid_code.length == 0) {

            alert('验证码不能为空')

        } else {

            $('#btn').click(function () {

                var user_info = {

                    'name': $('#name').val(),

                    'pwd': $('#pwd').val(),

                    'valid_code': $('#valid_code').val(),

                    'csrfmiddlewaretoken': $("[name = 'csrfmiddlewaretoken']").val(),

                    {#'csrfmiddlewaretoken': '{{ csrf_token }}',#}  --csrf_token的第二种写法

                };

                {#var pos = JSON.stringify(user_info);#}

                var pos = user_info;

                $.ajax({

                    url: '/login/',

                    type: 'post',

                    data: pos,

                    success: function (data) {

                        if (data==200){

                             window.location.href = "/index/"

                        }else {

                            alert(data)

                        }

                    }

                })

            });

        }

    })

</script>

</html>

后台代码

import random

from PIL import Image, ImageDraw, ImageFont

from io import BytesIO

import json

def get_random_color():

    return (

        random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)

    )

def get_random_code():

    code = ''

    for i in range(5):

        num = random.randint(0, 9)  # 0到9的随机数

        upper_num = random.randint(65, 90)  # 大写字母a-z对应的ASCII码

        lower_num = random.randint(97, 122)  # 小写字母a-z对应的ASCII码

        upper_letter = chr(upper_num)

        lower_letter = chr(lower_num)

        code_list = [num, upper_letter, lower_letter]

        x = random.sample(code_list, 1)[0]  # 随机生成一个字符串

        code += str(x)

    return code

verification_code = get_random_code()

def get_valid_code(request):

        img = Image.new('RGB', (320, 35), color=get_random_color())

        img_draw = ImageDraw.Draw(img)

        font = ImageFont.truetype('static/font/ss.TTF', size=25)

        img_draw.text((100, 0), verification_code, get_random_color(), font=font)

        f = BytesIO()

        img.save(f, 'png')

        data = f.getvalue()

        return HttpResponse(data)

def login(request):

    if request.method == "GET":

        return render(request, 'login.html')

    elif request.method == 'POST':

        name = request.POST.get('name')

        pwd = request.POST.get('pwd')

        valid_code = request.POST.get('valid_code')

        print(verification_code)

        print(name, pwd, valid_code)

        if valid_code.lower() == verification_code.lower():

            if name == 'zjh' and pwd == '':

                return HttpResponse(200)

            return HttpResponse('用户或密码错误')

        return HttpResponse('验证码错误')
-----https://www.cnblogs.com/seven-007/p/8034043.html

django--之登录表单提交的更多相关文章

  1. WEB-INF目录下登录表单提交的重定向

    问题描述 登陆表单提交跳转后刷新会重新提交表单,但是使用重定向时不走视图解析器,不能访问WEB-INF下的资源 解决方法 原方法 @RequestMapping(value = "/logi ...

  2. Django之form表单提交并验证

    1.提交的时候会报错 2. 需要在setting里面注释掉一句话,关闭跨站请求检查. 3. 注释掉以后,理论上就不报错了.可我还是卡壳了. 4. 通过在网上找方法,修复错误. 原因:表单action字 ...

  3. Django 使用form表单提交数据报错： Forbidden (403)

    Issue: 使用from表单submit之后报错入下: Action: 把django工程文件的setting.py中的'django.middleware.csrf.CsrfViewMiddlew ...

  4. [转]django自定义表单提交

    原文网址:http://www.cnblogs.com/retop/p/4677148.html 注:本人使用的Django1.8.3版本进行测试 除了使用Django内置表单,有时往往我们需要自定义 ...

  5. Django初体验（一）:自定义表单提交

    注:本人使用的Django1.8.3版本进行测试 除了使用Django内置表单,有时往往我们需要自定义表单.对于自定义表单Post方式提交往往会带来由CSRF(跨站请求伪造)产生的错误"CS ...

  6. django中form表单的提交：

    一,关于表单: 表单在百度百科的解释:   表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域 ...

  7. 用python模拟登录（解析cookie + 解析html + 表单提交 + 验证码识别 + excel读写 + 发送邮件）

    老婆大人每个月都要上一个网站上去查数据,然后做报表. 为了减轻老婆大人的工作压力,所以我决定做个小程序,减轻我老婆的工作量. 准备工作 1.tesseract-ocr 这个工具用来识别验证码,非常好用 ...

  8. Django---form表单提交数据到数据库（普通方法+Django的form类）

    目标: ①.初始form的简单应用 ②.使用Django的form组件完成新增一个帖子 方法一:普通方法 1.前端表单代码 <div> <form class="navba ...

  9. django 使用form组件提交数据之form表单提交

    django的form组件可以减少后台在进行一些重复性的验证工作,极大降低开发效率. 最近遇到一个问题: 当使用form表单提交数据后,如果数据格式不符合后台定义的规则,需要重新在前端页面填写数据. ...

随机推荐

  1. JS高程3：面向对象的程序设计——理解对象

    JS中对象的定义: (无序)属性的集合 (无序)值的集合 (无序)名值对的集合 JS对象是基于引用数据类型来创建的. JS对象创建的2种方式: 传统方式 对象字面量 var person = new ...

  2. OpenERP report doesn't work

    1. When you have used OpenOffice edited  one of reports,it has stored the report's banary data is da ...

  3. hdu6070 Dirt Ratio 二分+线段树

    /** 题目:hdu6070 Dirt Ratio 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6070 题意:给定n个数,求1.0*x/y最小是多少.x ...

  4. 全栈JavaScript之路（十四）HTML5 中与class属性相关的扩充

    1. getElementByClassName() :支持getElementsByClassName()方法的浏览器有IE 9+.Firefox 3+.Safari 3.1+.Chrome 和 O ...

  5. 第二百一十节，jQuery EasyUI，SearchBox(搜索框)组件

    jQuery EasyUI,SearchBox(搜索框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SearchBox(搜索框)组件的使用方法,这个组 ...

  6. js用计时器加载大量dom

    改进前: <table><tbody></tbody></table> var tbody=document.getElementsByTagName( ...

  7. ie tbody table 兼容方法

    IE6-IE9中tbody的innerHTML不能赋值,重现代码如下 Js代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 2 ...

  8. MS SqlServer 2008R2- Sql语句循环遍历生成百条随机数

    Sql语句,循环遍历生成区间5~20的随机数语句如下: are @i int DECLARE @Result INT DECLARE @Upper INT DECLARE @Lower INT ) ) ...

  9. jvm之 国际酒店 一次报表 load数据死循环导致的FULLGC

    从目前这几天的运行情况看,每天晚上0点到3点,应该是你们那边有大数据任务处理,在这个时间段,SOA会频繁报ZK断开重联的告警,见下图.   类似的问题,在CRM系统上也有出现过,我们dump内存,分析 ...

  10. Android显示全局Dialog

    1.需求:Dialog只能依附于某个具体的Activity显示,当我们需要一个全局的不依赖于某个Activity的Dialog时,应该怎么创建?类似于QQ消息提醒框 2.分析:我们可以在Service ...