前端代码

<!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. eclipse java MemoryAnalyzer 查询内存泄漏 环境配置

    简单记录下java用MemoryAnalyzer分析内存泄漏问题! 首先,内存不足的时候,会报错 Exception in thread "main" java.lang.OutO ...

  2. Java中数据库连接的一些方法资料汇总

    Java中Connection方法笔记 http://www.cnblogs.com/bincoding/p/6554954.html ResultSet详解(转)  https://www.cnbl ...

  3. JS继承的6种方法

    1.原型链 基本思想:利用原型让一个引用类型继承另外一个引用类型的属性和方法. 构造函数,原型,实例之间的关系:每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针,而实例都包含一个指向原 ...

  4. H3C-WA2210升级

    前几天升级了2210固件,做个记录 首先吐槽一点:华为官方给出的公共下载账号yx800根本没用..下不了官方提供的固件资料 组网准备: 升级之前要先看看原机版本(dis ver): 在升级版本之前,请 ...

  5. CCNA2.0笔记_ipv6的EIGRP

    IPv6的eigrp特征: 邻居发现 增量更新 快速收敛 负载均衡 三个表 -邻居表 -拓扑表 -路由表 配置ipv6的eigrp Router(config)#ipv6 unicast-routin ...

  6. The Definitive Guide To Django 2 学习笔记(三） URLconfs 和松耦合

    前面的例子体现了一个设计模式中的重要思想,松耦合. 不论我们是将/time/改成/current_time/,还是新建一个/another-time-page/同样指向views.py中的 curre ...

  7. 当input被选中时候获取改input的多个属性值

    <input name="selectTicket" class="selectTic" data-property="${couponDeta ...

  8. 请写出JavaScript中常用的三种事件。

    请写出JavaScript中常用的三种事件. 解答: onclick,onblur,onChange

  9. java 理解java的三大特性之封装

    使用封装有三大好处: 1.良好的封装能够减少耦合. 2.类内部的结构可以自由修改. 3.可以对成员进行更精确的控制. 4.隐藏信息,实现细节. public class Wife { private ...

  10. vs的快捷键包含部分代码的自动生成

    VS2010 快捷键 全屏:Shift+Alt+Enter注释选定内容:Ctrl+E+C/Crtr+E+U代码格式化:ctrl+E+F VS2008 使用小技巧——快捷键1. 怎样调整代码排版的格式? ...