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. 4天带你上手HarmonyOS ArkUI开发——《HarmonyOS ArkUI入门训练营之健康生活实战》

     <HarmonyOS ArkUI入门训练营之健康饮食应用>是面向入门开发者打造的实战课程系列.特邀华为终端BG高级开发工程师作为本次训练营讲师,以健康饮食为例,开展技术教学及实战案例分享 ...

  2. 国产GOWIN实现低成本实现CSI MIPI转换DVP

    CSI MIPI转换DVP,要么就是通用IC操作,如龙讯芯片和索尼芯片,但是复杂的寄存器控制器实在开发太累.对于FPGA操作,大部分都是用xilinx的方案,xilinx方案成本太高,IP复杂. 而用 ...

  3. 高云GOWIN下载出现No devices found咋办

    在使用GOWIN下载器下载会出现该类问题 No devices found错误. 原因如下: A . Windows10 系统会出现下载器通道顺序错误,所以要确保在 A 通道上. B.有一些 USB ...

  4. bookstack书栈网docker搭建

    准备好数据后,直接运行以下命令即可. docker run -d --name bookstack \ --restart always \ --privileged=true\ -p 8181:81 ...

  5. 分布式文件存储-FastDFS

    1.1 FastDFS简介 1.1.1 FastDFS体系结构 FastDFS是一个开源的轻量级分布式文件系统,它对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,解决了 ...

  6. opensips使用drouting进行路由

    操作系统 :CentOS 7.6_x64 opensips版本:2.4.9 drouting是Dynamic Routing(动态路由)的缩写,该模块可为特定呼叫选择(基于多个条件)最佳网关.今天整理 ...

  7. 基于 EMR OLAP 的开源实时数仓解决方案之 ClickHouse 事务实现

    ​简介:阿里云 EMR OLAP 与 Flink 团队深度合作,支持了 Flink 到 ClickHouse 的 Exactly-Once写入来保证整个实时数仓数据的准确性.本文介绍了基于 EMR O ...

  8. 内含干货PPT下载｜一站式数据管理DMS及最新解决方案发布

    ​简介: 今天主要给大家介绍一站式数据管理平台DMS以及解决方案的发布.议题包含企业数据管理当前的一些痛,DMS一站式数据管理平台以及其核心技术,实时数仓解决方案以及相应的应用实践. "数聚 ...

  9. dotnet OpenXML 解析 PPT 图表 面积图入门

    本文告诉大家如何使用 OpenXML 解析 PPT 的图表,以面积图为入门例子告诉大家 OpenXML 的存储 在 PPT 里面,有强大的图表功能,可以联动 Excel 展示数据.在 PPT 里面的图 ...

  10. 纯css高斯背景模糊（毛玻璃，伪元素，完整实例）

    先上效果图: 写博客不管是做笔记还是干啥,直接上源码不行么,还不放效果图,拆分成几段谁慢慢看,慢慢理解去 自己动手,丰衣足食,上代码: <!DOCTYPE HTML> <html l ...