注册页面之register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<link rel="stylesheet" href="/static/blog/bs/css/bootstrap.css">
<style>
#avatar_img{
margin-left: 20px;
}
#avatar{
display: none;
}
</style>
</head>
<body>
<h3 style="text-align:center">注册页面</h3>
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-offset-3">
<form>
{% csrf_token %}
{% for filed in form %}
<div class="form-group">
<label for={{ filed.auto_id }}>{{ filed.label }}</label>
{{ filed }}
</div>
{% endfor %}
<div class="form-group">
<label for="avatar">头像
<img id="avatar_img" width="60" height="60" src="/static/img/default.png">
</label>
<input type="file" id="avatar" name="avatar">
</div>
<input type="button" class="btn btn-default reg_btn" value="submit"><span class="error"></span>
</form>
</div>
</div>
</div>
</body>
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script>
$("#avatar").change(function () {
//alert('上传成功')
//获取用户选中的文件对象
var file_obj=$(this)[0].files[0];
//获取文件对象的路径
var reader = new FileReader()
reader.readAsDataURL(file_obj)
// 修改img的src属性 ，src=文件对象的路径
reader.onload = function () {
$("#avatar_img").attr("src", reader.result)
};
});
// 基于Ajax提交数据
$(".reg_btn").click(function () {
//console.log($("#form").serializeArray());
var formdata = new FormData();
var request_data = $("#form").serializeArray();
$.each(request_data, function (index, data) {
formdata.append(data.name, data.value)
});
formdata.append("avatar", $("#avatar")[0].files[0]);
$.ajax({
url: "",
type: "post",
contentType: false,
processData: false,
data: formdata,
success: function (data) {
//console.log(data);
if (data.user) {
// 注册成功
location.href="/login/"
}
else { // 注册失败
//console.log(data.msg)
// 清空错误信息
$("span.error").html("");
$(".form-group").removeClass("has-error");
// 展此次提交的错误信息!
$.each(data.msg, function (field, error_list) {
console.log(field, error_list);
if (field=="__all__"){
$("#id_re_pwd").next().html(error_list[0]).parent().addClass("has-error");
}
$("#id_" + field).next().html(error_list[0]);
$("#id_" + field).parent().addClass("has-error");
})
}
}
})
})
</script>
</html>
注册界面之register 方法
def register(request):
#用户注册
if request.is_ajax():
print(request.POST)
form = UserForm(request.POST)
response={'user':None,"msg":None}
if form.is_valid():
response["user"]=form.cleaned_data.get("user")
else:
print(form.cleaned_data)
print(form.errors)
response['msg']=form.errors
return JsonResponse(response)
form=UserForm()
return render(request,"register.html",{"form": form})
不明白为什么会有这么对的AJAX的应用，前端这一块一直是我的弱项，md。。。
接下来提升一个计划的优先级，就是crm。
crm项目和这个cnblog的级别设置为同级别。
下面这串代码为错误信息展示代码，这里使用了each方法，把错误信息统一获取，然后挨个遍历
$.each(data.msg, function (field, error_list) {
console.log(field, error_list);
if (field=="__all__"){
$("#id_re_pwd").next().html(error_list[0]).parent().addClass("has-error");
加油！
网友评论