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 NEXT调优工具Smart Perf Host高效使用指南

      在软件开发的过程中,很多开发者都经常会遇到一些性能问题,比如应用启动慢.点击滑动卡顿.应用后台被杀等,想要解决这些问题势必需要收集大量系统数据.而在收集数据的过程中,开发者则需要在各种工具和命令之 ...

  2. 重新整理.net core 计1400篇[六] (.net core 一个简易版的依赖注入容器 )

    前言 我们了解到一个依赖注入的形式是: 注入依赖服务:var root = new Cat().Register<IFoo, Foo>(Lifetime.Transient); 获取对应的 ...

  3. nuxt使用介绍[学习记录]

    服务端渲染 传统服务端渲染 单页面应用 SPA nuxt 是什么 Nuxt.js 是一个基于 Vue.js 的通用应用框架. 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 ...

  4. 力扣303(java)-区域和检索-数组不可变（简单）

    题目: 给定一个整数数组  nums,处理以下类型的多个查询: 计算索引 left 和 right (包含 left 和 right)之间的 nums 元素的 和 ,其中 left <= rig ...

  5. OpenKruise v1.3：新增自定义 Pod Probe 探针能力与大规模集群性能显著提升

    简介: 在版本 v1.3 中,OpenKruise 提供了新的 CRD 资源 PodProbeMarker,改善了大规模集群的一些性能问题,Advanced DaemonSet 支持镜像预热,以及 C ...

  6. 阿里云交互式分析与Presto对比分析及使用注意事项

    阿里云交互式分析与Presto对比分析及使用注意事项本文由阿里巴巴耿江涛带来以"阿里云交互式分析与Presto对比分析及使用注意事项"为题的演讲.文章首先介绍了Presto以及它的 ...

  7. 从Redis7.0发布看Redis的过去与未来

    简介: 经历接近一年的开发.三个候选版本,Redis 7.0终于正式发布,这是Redis历史上改变最多的一个大版本,它不仅包含了50多个新命令,还有大量核心新特性与改进,这些不仅能够解决用户使用中的诸 ...

  8. Spring RSocket：基于服务注册发现的 RSocket 负载均衡

    简介: RSocket 作为通讯协议的后起之秀,核心是二进制异步化消息通讯,是否也能和 Spring Cloud 技术栈结合,实现服务注册发现.客户端负载均衡,从而更高效地实现面向服务的架构?这篇文章 ...

  9. 比开源快30倍的自研SQL Parser设计与实践

    简介: SQL作为一种领域语言,最早用于关系型数据库,方便管理结构化数据:SQL由多种不同的类型的语言组成,包括数据定义语言,数据控制语言.数据操作语言:各数据库产品都有不同的声明和实现:用户可以很方 ...

  10. [GPT] 提高个人网站的访问量的 30 种详细方式

    内容优化:提高网站的质量和价值,让用户喜欢并分享你的内容. SEO优化:通过关键词优化.网站结构优化等方式,提高搜索引擎排名. 社交媒体:在社交媒体上分享你的内容,吸引更多人来访问你的网站. 广告投放 ...