path('register/',views.register)

　　

#注册的form表单

from django import forms

from django.forms import widgets

class RegForm(forms.Form):

    user = forms.CharField(max_length=32,widget=widgets.TextInput(attrs={'class':'form-control'}),label='用户名')

    pwd = forms.CharField(max_length=32,widget=widgets.PasswordInput(attrs={'class':'form-control'}),label='密码')

    re_pwd = forms.CharField(max_length=32,widget=widgets.PasswordInput(attrs={'class':'form-control'}),label='确认密码')

    email = forms.EmailField(max_length=32,widget=widgets.EmailInput(attrs={'class':'form-control'}),label='邮箱')

#注册

def register(request):

    if request.is_ajax():  #这一步也可以用if request.method==POST判断

        form = RegForm(request.POST)

        response = {'user': None,'msg': None}  #返回的数据，默认设置为 None

        if form.is_valid():

            #如果前端检验成功，返回校验后的正确信息

            #这一步还需要把用户注册信息保存到数据库中

            response['user'] = form.cleaned_data.get('user')

        else:

            #如果前端检验失败，返回错误信息

            response["msg"] = form.errors

        return JsonResponse(response)

    form = RegForm()

    return render(request,'register.html',{'form': form})

　　

{% load static %}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>注册</title>

    <link rel="stylesheet" href="{% static 'blog_app/bootstrap/css/bootstrap.css' %}">

    <script src="{% static 'blog_app/jq.js' %}"></script>

</head>

<body>

    <div class="container">

        <div class="row">

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

                <h3>注册</h3>

                <hr>

                <form>

                    {% csrf_token %}

                    {% for field in form %}    {# 循环form表单对象，field表示每一个字段 #}

                        <div class="form-group">

                            <label for="{{ field.auto_id }}">{{ field.label }}</label>  {# field.auto_id表示生成表单时的id值 #}

                            {{field}}

                        </div>

                    {% endfor %}

                    <div class="form-group">

                        <label for="avatar">

                            头像

                            <img src="/static/blog_app/default.png" width="70px" height="70px" id="avatar_img">

                        </label>

                        <input type="file"  id="avatar" style="display: none">

                    </div>

                    <input type="button" class="btn btn-success register_btn" value="注册" id="register_btn"><span class="error"></span>

                </form>

            </div>

        </div>

    </div>

    <script>

        // 头像预览

        $('#avatar').change(function(){

            // 获取用户选中的文件对象

            var file_obj = $(this)[0].files[0]

            // 获取文件对象的路径(使用文件阅读器)

            var reader = new FileReader()       // 创建一个文件阅读器对象

            reader.readAsDataURL(file_obj)      // 读出文件的路径

             // 显示预览头像图片

            reader.onload = function(){

                $('#avatar_img').attr('src',reader.result)

            }

        })

        // Ajax提交注册信息,数据以FormData的形式发送，组键值对

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

            var formdata = new FormData()

            formdata.append("user",$('#id_user').val())

            formdata.append("pwd",$('#id_pwd').val())

            formdata.append("re_pwd",$('#id_re_pwd').val())

            formdata.append("email",$('#id_email').val())

            formdata.append("avatar",$('#avatar')[0].files[0])

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

            $.ajax({

                url: '',

                type: 'post',

                contentType: false,   //使用formdata提交时，必须配置的

                processData: false,   //使用formdata提交时，必须配置的

                data: formdata,

                success: function (data) {

                    // 回调函数

                    // 接收后端返回的信息，并进行打印

                    // 还可以通过返回的数据进行相应的前端错误提示，以及进行相应的路径跳转

                    console.log(data)

                }

            })

        })

    </script>

</body>

</html>

　　

Django——基于forms组件和ajax的注册功能的更多相关文章

  1. 3- 功能2：基于forms组件和ajax实现注册功能

    1.forms组件的注册页面 url from django.urls import path, re_path from blog import views from django.views.st ...

  2. 基于forms组件和Ajax实现注册功能

    一.基于forms组件的注册页面设计 1.运用forms组件的校验字段功能实现用户注册 views.py:    (在钩子中代码解耦,将form放在cnblog/blog/Myforms.py中) f ...

  3. BBS-基于forms组件和ajax实现注册功能

    http://www.cnblogs.com/yuanchenqi/articles/7638956.html 1.设计注册页面 views.py from django import forms c ...

  4. 2.1博客系统 |基于form组件和Ajax实现注册登录

    基于forms组件和Ajax实现注册功能 1 基于forms组件设计注册页面 --点击头像 === 点击input --头像预览: 修改用户选中的文件对象:获取文件对象的路径:修改img的src属性, ...

  5. django之forms组件,cookie&session

    forms组件 先自己实现注册功能,并且对用户输入的信息加限制条件如果用户输入的信息不符合条件,前端展示报错信息 from django.shortcuts import render,HttpRes ...

  6. django之forms组件

    在django中forms组件有其强大的功能,里面集合和众多的函数和方法:下面来看一下它的源码 """ Form classes """ f ...

  7. Django学习笔记之利用Form和Ajax实现注册功能

    一.注册相关的知识点 1.Form组件 我们一般写Form的时候都是把它写在views视图里面,那么他和我们的视图函数也不影响,我们可以吧它单另拿出来,在应用下面建一个forms.py的文件来存放 2 ...

  8. Django之forms组件进阶

    Django Form表单组件   Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要 ...

  9. web框架开发-Django的Forms组件

    校验字段功能 针对一个实例:用户注册. 模型:models.py class UserInfo(models.Model): name=models.CharField(max_length=32) ...

  10. Django之forms组件使用

    注册功能 1.渲染前端标签获取用户输入 >>> 渲染标签 2.获取用户输入传递到后端校验 >>> 校验数据 3.校验未通过展示错误信息 >>> 展 ...

随机推荐

  1. KL散度和交叉熵的对比介绍

    KL散度(Kullback-Leibler Divergence)和交叉熵(Cross Entropy)是在机器学习中广泛使用的概念.这两者都用于比较两个概率分布之间的相似性,但在一些方面,它们也有所 ...

  2. C++ 解引用与函数基础：内存地址、调用方法及声明

    C++ 解引用 获取内存地址和值 在上一页的示例中,我们使用了指针变量来获取变量的内存地址(与引用运算符 & 一起使用).但是,你也可以使用指针来获取变量的值,这可以通过使用 * 运算符(解引 ...

  3. AI数字人直播优势凸显,那么该如何打造AI数字人直播间?

    近年来,我们听到了很多无人直播间,数字人直播间这些名词,很多人会好奇这到底是什么意思,没人还可以直播吗?那什么是AI数字人直播? AI数字人是用真人拍摄五分钟高清视频上传到青否数字人克隆端,生成的数字 ...

  4. 利用navicat实现excel转json

    1.需要工具,Navicat Premium,网上有破解及安装教程 2.新建sqlite连接,选择新建sqlite3,如下图 3.接着点确定,如图 4. 5.

  5. Oracle SQL 常用的将varchar数据处理成number的正则

    Oracle SQL 常用的数据处理正则 去除所有的空格 replace(t.dxmz,chr(32),'') 匹配非纯数字 not regexp_like(t.zgbs,'^[[:digit:]]* ...

  6. 怀里橘猫柴犬，掌上代码江湖——对话阿里云 MVP郭旭东

    简介: 跟郭旭东聊过之后,我对程序员的敬佩又多一分.这个92年的开发者,难能可贵地兼备朝气蓬勃的技术能量与长远深刻的行业洞见.独自承担DevOps平台从0到1的所有工作,我打趣说超级开发者不过如此,他 ...

  7. Flink 如何实时分析 Iceberg 数据湖的 CDC 数据

    简介: 数据湖的架构中,CDC 数据实时读写的方案和原理 本文由李劲松.胡争分享,社区志愿者杨伟海.李培殿整理.主要介绍在数据湖的架构中,CDC 数据实时读写的方案和原理.文章主要分为 4 个部分内容 ...

  8. IDA动态调试快捷键

    1. F2下断点2. F7进入函数,F8单步调试,F9跳到下一个断点,F2下断点,G调到函数地址3. N重名4. g跳到地址和函数名5. u取消把函数汇编变成机器码6. c就是把机器码变成汇编7. F ...

  9. Niginx中Vue Router 历史（history）模式的配置

    快速配置 将build后的文件直接丢到niginx目录下的html文件夹中,然后配置nginx.conf,就可以在快速的实现niginxhistory模式的配置了. location /{ # 可使用 ...

  10. Pinpoint对k8s关键业务模块进行全链路监控(17)

    一.全链路监控概述 1.1 什么是全链路监控 在分布式微服务架构中,系统为了接收并处理一个前端用户请求,需要让多个微服务应用协同工作,其中 的每一个微服务应用都可以用不同的编程语言构建,由不同的团队开 ...