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. HarmonyOS使用多线程并发能力开发

      一.多线程并发概述 1.简介 并发模型是用来实现不同应用场景中并发任务的编程模型,常见的并发模型分为基于内存共享的并发模型和基于消息通信的并发模型. Actor并发模型作为基于消息通信并发模型的典 ...

  2. HDC2021技术分论坛：跨端分布式计算技术初探

    作者:zhengkai,分布式通信首席技术专家 当今的移动应用都向着智能化和多样化方向发展,例如AI辅助,VR/AR应用,沉浸式游戏等.然而现实中的移动设备,因为便携性要求受限于尺寸.电池容量以及温控 ...

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

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

  4. Excel 表间关联运算的示例

    用 Excel 处理数据时,经常会涉及到多页 sheet 数据之间的关联运算需求,用 vlookup 可以完成部分简单关联,但较复杂的情况时仍然不太方便,常常需要多次操作才能完成.另外,当要做关联的文 ...

  5. docker 应用篇————容器卷[十一]

    前言 简单介绍一下容器卷. 正文 我们发现一个文件,就是什么呢? 就是说因为我们的容器一但删除那么什么都没有了. 那么如何能够不删除呢?那么可以使用容器卷. 比如说系统我们容器内的/usr 使用我们的 ...

  6. MySQL组合索引

    MySQL组引合索优化SQL 我的场景 200w左右的数据,后面会更多 使用定时任务爬取数据插入到自己的数据库.要保证数据的唯一性,所以我用了组合唯一索引. 表结构 最初的组合索引 SQL执行和exp ...

  7. 面试官：说一说CyclicBarrier的妙用！我：这个没用过

    写在开头 面试官:同学,AQS的原理知道吗? 我:学过一点,抽象队列同步器,Java中很多同步工具都是基于它的... 面试官:好的,那其中CyclicBarrier学过吗?讲一讲它的妙用吧 我:啊,这 ...

  8. 获取电脑真实的IP地址，忽略虚拟机等IP地址的干扰

    /** * @author yins * @date 2018年8月12日下午9:53:58 */ import java.net.Inet4Address; import java.net.Inet ...

  9. 【Oracle】使用like的时候遇到的问题

    [Oracle]使用like的时候遇到的问题 like语句其中的%就代表着一个零或者多个字符,_代表一个字符,%与_可以同时使用 name想查询以'_'结尾的字符 用这个语句就会有问题 select ...

  10. 【笔记】问题控制与管理&故障、问题、已知错误、变更请求之间的逻辑关系&问题管理流程

    [笔记]问题控制与管理&故障.问题.已知错误.变更请求之间的逻辑关系 问题控制与管理 与故障管理的尽可能快地恢复服多的目标不同,问题管理是要防止再次发生故障 例如你制作了一个报表,用户填写了问 ...