BBS注册功能
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% load static %}
<script src="{% static 'bootstrap/js/jquery.js' %}"></script>
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2 class="text-center">注册</h2>
<form id="myform" novalidate>
{% csrf_token %} #为了通过中间件校验
{% for foo in form_obj %} 对后端传来的form组件的列表进行循环
<div class="form-group">
<label for="{{ foo.auto_id }}">{{ foo.label }}</label> #for是用来和input绑定的， foo里面有label属性
{{ foo }} #是一个个input框，有id属性的
<span style="color: red" class="pull-right"></span>
</div>
{% endfor %}
<div class="form-group">
<label for="myfile">头像
<img src="/static/img/default.png" alt="" width="80" style="margin-left: 10px" id="myimg">
</label>
<input type="file" id="myfile" name="avatar" style="display: none">
</div>
<input type="button" class="btn btn-success pull-right" value="注册" id="commit">
</form>
</div>
</div>
</div>
<script>
//当标签的src发生了变化的时候，就变化。
$('#myfile').change(function () {
// 文件阅读器
//1 产生一个文件阅读器对象
var fileReader = new FileReader();
//2 获取用户上传的文件
var fileObj = $(this)[0].files[0];
//3 让文件阅读器读取该文件
fileReader.readAsDataURL(fileObj); // 这一步是异步 提交完之后直接运行下一行
//4 利用文件阅读器将文件展示出来
fileReader.onload = function () {
$('#myimg').attr('src', fileReader.result)
}
});
//点击事件，用FormData对象来传键值对和文件
$('#commit').click(function () {
var formDataObj = new FormData();
//在前面的form组件传来的对象外层用了一个 form 表单，这时候就有用处了，可以通过serializeArray()自动获取到内部所有的普通键值对
$.each($('#myform').serializeArray(),function (index,obj) {
formDataObj.append(obj.name,obj.value);
});
//把文件内容放进去了。
formDataObj.append('avatar',$('#myfile')[0].files[0]);
//通过ajax来传送
$.ajax({
url:'',
type:'post',
//把上面的FormData对象放进去
data:formDataObj,
//必要的两个参数
contentType:false,
processData:false,
success:function (data) {
if (data.code == 1000){
window.location.href = data.url
}else {
//后端传来的错误信息正好加一个id_就是前面input框的id
$.each(data.msg,function (index,obj) {
var targetId = '#id_'+ index;
$(targetId).next().text(obj[0]).parent().addClass('has-error')
})
}
}
})
});
$('input').focus(function () {
$(this).next().text('').parent().removeClass('has-error')
})
</script>
</body>
</html>
后端代码：
def register(request):
form_obj = myforms.MyRegForm()
if request.method == 'POST':
back_dic = {'code':1000,'msg':''}
form_obj = myforms.MyRegForm(request.POST)#这里的form_obj名字一定要和上面的一样，虽然是两个对象，但是前段解析的时候用的是同一个名字。
if form_obj.is_valid():#如果数据没有问题的话
clean_data = form_obj.cleaned_data
clean_data.pop('confirm_password')
file_obj = request.FILES.get('avater')
if file_obj:# 获取用户上传到头像之后 一定要做判断 判断用户是否上传了 如果没有上传 字典中就不加avatar键值对
clean_data['avatar'] = file_obj
models.UserInfo.objects.create_user(**clean_data)
back_dic['url'] = '/login' #直接跳转到登录界面
else:
back_dic['code'] = 2000
back_dic['msg'] = form_obj.errors #把错误的信息的键值对全放进去
return JsonResponse(back_dic) #通过序列化，返回前端ajax的success
return render(request,'register.html',locals())