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>
浙公网安备 33010602011771号