BBS项目模态框基本使用
需求：点击按钮弹出模态框，填写用户信息并完成操作，最后弹出提示框。
使用的技术点：
- ajax提交post请求，发送文件数据， forms组件表单检验。
- bootstrap的模态框基本使用。
- sweetalert的弹出框基本使用。
实现效果
技术点总结：
1、在主页html上设置一个注册的点击按钮或者a标签，这个按钮关联一个模态框。
data-toggle="modal" data-target="#myRegModal"起到关联的作用，点击该标签，弹出关联的模态框。- 在模态框内书写注册校验的html页面，由于页面过多，使用模版导入
include的方式，导入事先写好的注册页面，并且在导入的同时通过with给注册页面传数据。 - 在下面第15行代码处导入事先写好的注册页面并且给该页面传一个forms组件校验时需要的
form_obj对象 - 代码第20行，给按钮设置id值用于ajax发送数据，点击该按钮，收集form表单内数据并提交给后端。
<!-- index.html的局部 -->
<li><a href="" data-toggle="modal" data-target="#myRegModal">注册</a></li>
<!-- 注册Modal -->
<div class="modal fade" id="myRegModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">注册页面</h4>
</div>
<div class="modal-body">
{% include 'tmp_register.html' with form_obj=form_obj %}
</div>
<div class="modal-footer">
<span id="error_msg" style="color: red" class="pull-left"></span>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="register_btn">注册</button>
</div>
</div>
</div>
</div>
2、注册模版页面
- 该页面是局部模版页面，通过include被导入到模态框中。
- 该页面上完成完成用户注册信息的收集，并通过ajax请求将数据发给网站后端。
<!-- tmp_register.html -->
{% load static %}
<div class="row">
<div class="col-md-12">
<form id="myform">
{% csrf_token %}
{% for form in form_obj %}
<div class="form-group">
<label for="{{ form.auto_id }}">{{ form.label }}</label>
{{ form }}
<span style="color: red" class="pull-right">{{ form.errors.0 }}</span>
</div>
{% endfor %}
<div class="form-group">
<label for="id_avatar">头像
<img src="{% static 'img/default.png' %}" alt="" id="img_avatar" width="100" style="margin-left: 10px">
<input type="file" id="id_avatar" name="avatar" style="display: none">
</label>
</div>
</form>
</div>
</div>
<script src="{% static 'js/ajax_csrf.js' %}"></script> // 跨站伪造请求的处理
3、ajax提交数据并弹出提示框
- 该js内容放在index.html页面上，当用户点击模态框的注册按钮时，通过绑定的id值(register_btn)触发ajax的提交数据。
- 代码第30行是隐藏模态框的设置
$('#myRegModal').modal('hide'); - 代码第31行是使用sweetalert弹出弹出狂的设置
swal("恭喜！", "账号注册成功，请登录", "success"); - 使用bootstrap和sweetalert需要实现导入js文件和csc文件，且依赖jquery。这里直接在index页面导入即可。
<!-- index.html的局部 -->
<script>
{# 选择图片立刻显示，文本域改变事件change, 文件阅读器对象FileReader #}
$('#id_avatar').change(function () {
let myFileReaderObj = new FileReader();
let fileObj = $(this)[0].files[0];
myFileReaderObj.readAsDataURL(fileObj);
myFileReaderObj.onload = function () {
$('#img_avatar').attr('src', myFileReaderObj.result)
}
});
{# ajax请求 #}
$('#register_btn').click(function () {
let formDataObj = new FormData();
$.each($('#myform').serializeArray(), function (index, obj) {
formDataObj.append(obj.name, obj.value);
});
formDataObj.append('avatar', $('#id_avatar')[0].files[0]);
$.ajax({
url:'{% url "register" %}',
type: 'post',
data: formDataObj,
contentType: false,
processData: false,
success: function (args) {
if (args.code === 1000){
$('#myRegModal').modal('hide');
swal("恭喜！", "账号注册成功，请登录", "success");
}else{
$.each(args.msg, function (field, errors) {
$(`#id_${field}`).next().text(errors[0]).parent().addClass('has-error');
})
}
}
})
});
{# 聚焦输入框，提示信息消失 #}
$('input').click(function () {
$(this).next().text('').parent().removeClass('has-error');
})
</script>
后端视图函数
class RegView(View):
....
def post(self, request):
back_info = {'code': 1000}
form_obj = myforms.RegForm(request.POST)
if form_obj.is_valid():
cleaned_data = form_obj.cleaned_data
cleaned_data.pop('re_password')
avatar = request.FILES.get('avatar')
if avatar: cleaned_data['avatar'] = avatar
models.UserInfo.objects.create_user(**cleaned_data) # 用户注册
back_info['url'] = reverse('index') # 前端可能需要
else:
back_info['code'] = 2000
back_info['msg'] = form_obj.errors # forms校验错误信息
return JsonResponse(back_info)
