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. Bash与shell的区别

    Bash 与 shell 的区别 介绍 常见的 shell 解释器有 sh.bash 这两种,其他的 ksh.csh 和 zsh 等是不常见的.Mac OS 中默认安装了以上所有类型,Windows ...

  2. HarmonyOS崩溃服务能力全新上线，帮你高效解决崩溃问题！

    原文:https://mp.weixin.qq.com/s/YmYzNXsvsqt8U8JX3vlmrg,点击链接查看更多技术内容. 一.为什么需要崩溃服务能力 用户在使用原子化服务时,出现卡顿.缓慢 ...

  3. node nvm使用

    背景 node 经过了一次大的改变,直接从8到了10,差别很大,但是有的项目又需要用到8,这个时候不能完全升级. 所以我们需要一个管理虚拟环境的工具. 安装 https://github.com/co ...

  4. InnoDB常用锁总结（行锁、间隙锁、临键锁、表锁）

    相关文章 数据库系列:MySQL慢查询分析和性能优化 数据库系列:MySQL索引优化总结(综合版) 数据库系列:高并发下的数据字段变更 数据库系列:覆盖索引和规避回表 数据库系列:数据库高可用及无损扩 ...

  5. webkit简介

    WebKit是一款开源的浏览器引擎,主要用于渲染HTML网页和执行JavaScript代码.WebKit起源于苹果公司,最初是为了开发Safari浏览器而创建的.现在,它已经成为许多浏览器(如苹果的S ...

  6. drf——基于apiview写过滤、排序和分页

    基于APIView带过滤和排序 from rest_framework.views import APIView from .models import Book from .serializer i ...

  7. 关于mac使用figma以及企业微信3.1.18版本,CPU系统占用率飙升至70%

    问题描述 使用一段时间正常,不知道是修改了什么设置,还是有什么软件冲突,导致cpu使用率极高 系统进程中有一个 kernel_task 占用了大量的cpu 并且该占用并不会消失,只要figma打开就会 ...

  8. 【笔记】Oracle 窗口函数

    Oracle 窗口函数 简单来说,窗口函数是分析函数的一种,通常可以理解成over()函数 构成:函数名①() over(partition by 分组的列名 order by 排序的列名 XXX) ...

  9. 13_总结Vue数据监测

    总结: Vue监视数据的原理:         1.vue会监视data中所有层次的数据         2.如何监视对象中的数据?             通过setter实现监视,且要在new V ...

  10. 什么是 IDA 工具

    中文名:交互式反编译器 英文名:Interactive Disassembler Professional 为众多 0day 世界的成员和 ShellCode 安全分析人士不可缺少的利器! IDA P ...