前端代码

<!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. numpy.meshgrid()理解

    本文的目的是记录meshgrid()的理解过程: step1. 通过一个示例引入创建网格点矩阵; step2. 基于步骤1,说明meshgrid()的作用; step3. 详细解读meshgrid() ...

  2. SMP

    SMP(Symmetrical Multi-Processing):对称多处理技术,是指在一个计算机上汇集了一组处理器(多CPU),各CPU之间共享内存子系统以及总线结构. 在smp系统中,所有的CP ...

  3. iOS网络访问之使用AFNetworking

    AFNetworking是IOS上常用的第三方网络访问库,我们可以在github上下载它,同时github上有它详细的使用说明,最新的AFNetworing2.0与1.0有很大的变化,这里仅对2.0常 ...

  4. 1 App Components - App组件

    Android应用框架可以让你使用一系列可重用的组件来创建极其丰富和新颖的应用.本节说明了Android应用如何工作,如何使用组件来创建应用. Managing the Activity Lifecy ...

  5. jxta-amalto

    前几天在网络上搜索jxta的消息,发现jxta 2.8x已经启动了,官方地址http://chaupal.github.io/ 在浏览其邮件列表时,意外发现一老外基于jxta 2.6修改的一版, 可在 ...

  6. css背景图片拉伸

    css背景图片拉伸 background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 10 ...

  7. （转）ThreadLocal

    转自:http://blog.csdn.net/lufeng20/article/details/24314381 Thread同步机制的比较 ThreadLocal和线程同步机制相比有什么优势呢?T ...

  8. 【Raspberry Pi】GPIO-发光二极管控制

    注意事项: 注意IO脚电流不能大于16mA,3V脚总电流不能大于50mA,所以两个二极管各上拉了400欧左右的电阻 采用物理针脚7和9做控制 其中output参数LOW为接通,HIGH为屏蔽 impo ...

  9. WPF数据验证（4）——响应与获取验证错误

    1780 前面的示例中,有关用户接受到错误的唯一指示是在违反规则的文本框周围的红色轮廓.为了提供更多信息,可以处理 Error 事件,但存储或清除错误时会引发该事件,但前提是必须确保已将 Bindin ...

  10. Material design之Views and Shadows

    Views and Shadows: elevation是构成控件阴影的基本属性.通过设置较高的Z值可以接受更大的阴影,阴影只能投射到Z=0的平面上. View Elevation 控件的Z值,是由两 ...