Django——基于forms组件和ajax的注册功能

1	`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>