Ajax 와 forms 구성 요 소 를 기반 으로 등록 기능 을 수행 하 는 인 스 턴 스 코드
<!DOCTYPE html>
{% load static %}
{% get_static_prefix as getstatic %}
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="https://www.jd.com/favicon.ico">
<link href="{{ getstatic }}plugins/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title> </title>
<style>
.title-top {
padding: 0;
font-size: 21px;
margin-top: 40px;
}
.form-padding {
padding-right: 65px;
}
.has-feedback .country-code {
width: 53px;
text-align: right;
padding-right: 5px;
}
.mobile-control-wrap {
display: flex;
}
.mobile-num {
margin-left: 10px;
}
.form-horizontal .form-group {
margin-right: -15px;
margin-left: -15px;
}
.body-box {
margin-top: 70px;
height: 567px;
width: 68%;
}
.cnblogs-btn-blue {
color: white;
padding: 6px 14px;
letter-spacing: 1em;
padding-left: 2em;
background-color: RGB(70, 136, 214);
text-align: center;
}
.cnblogs-btn-blue :hover {
color: white;
}
.navbar {
background-color: RGB(40, 62, 92);
}
.side-img-box {
height: 300px;
position: relative;
padding-left: 0;
margin-top: 168px;
}
.side-img-box img {
position: relative;
width: 100%;
top: 50%;
transform: translateY(-50%);
border-radius: 8px;
}
.text-danger {
float: right;
}
.img-thumbnail {
width: 100px;
height: 100px;
margin-bottom: 20px;
margin-top: -10px;
}
#avatr_img {
margin-left: 237px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<img src="{{ getstatic }}img/TIM 20180205110238.png">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container body-box" style="height: 567px;">
<div class="center-block body-content">
<!-- -->
<div class="hidden-xs title-top col-sm-12">
<hr class="head-hr">
</div>
<div class="form-wrap">
<form class="form-horizontal col-sm-8 form-padding" role="form" id="registerForm" method="post"
novalidate="novalidate">
<!-- -->
<div id="avatr_img" class="form-group">
<label for="avatar">
<img id="avatar_img" class="img-thumbnail" src="{{ getstatic }}img/registersideimg.png" alt=" ">
</label>
<input type="file" style="display: none;" id="avatar">
</div>
<div class="form-group">
<div class="col-sm-2 control-label">
<label class="w4-2" for="Email"> </label>
</div>
<div class="col-sm-10 has-feedback">
{{ register_form.email }}
<span class="text-danger"></span>
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label">
<label class="w4-4" for="DisplayName"> </label>
</div>
<div class="col-sm-10 has-feedback">
{{ register_form.nik_name }}
<span class="text-danger field-validation-error"><span id="DisplayName-error"></span></span>
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label">
<label class="w4-2" for="Password"> </label>
</div>
<div class="col-sm-10 has-feedback">
{{ register_form.password }}
<span class="text-danger field-validation-error"></span>
</div>
</div>
<div class="form-group">
<div class="col-sm-2 control-label">
<label class="w4-4" for="ConfirmPassword"> </label>
</div>
<div class="col-sm-10 has-feedback">
{{ register_form.repeta_pwd }}
<span class="text-danger field-validation-error"><span id="mobile-error"></span></span>
</div>
</div>
<!-- -->
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<span class="col-sm-12 ajax-error"></span>
<input id="submitBtn" onclick="regesite()" type="button"
class="btn ladda-button center-block cnblogs-btn-blue" value=" ">
</div>
</div>
<!-- -->
<div class="col-sm-offset-2 register-sign">
<span class="asterisk">*</span> “ ” ， <a class="look-agreeon" target="_blank"
href="//passport.cnblogs.com/agreement.html"> </a>。
</div>
<!--hidden-->
{% csrf_token %}
</form>
<div class="hidden-xs col-sm-4 side-img-box">
<div class="side-line">
<div></div>
</div>
<img src="{{ getstatic }}img/registersideimg.png">
</div>
</div>
</div>
</div>
<script src="{{ getstatic }}js/jquery-3.2.1.min.js"></script>
<script src="{{ getstatic }}plugins/bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
<script>
$("#avatar").change(function () {
var chooice_file = $(this)[0].files[0];
var reader = new FileReader();// ，
reader.readAsDataURL(chooice_file);
reader.onload=function () {
$("#avatar_img").attr("src",this.result)
}
})
function regesite() {
var formdata = new FormData(); //z
formdata.append("email",$("#id_email").val());
formdata.append("nik_name",$("#id_nik_name").val());
formdata.append("password",$("#id_password").val());
formdata.append("repeta_pwd",$("#id_repeta_pwd").val());
formdata.append("valid_img",$("#avatar")[0].files[0]);
formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());
$.ajax({
url: "{% url "regeste" %}",
type: "POST",
data:formdata,
contentType:false,
processData:false,
success: function (data) {
response_data = JSON.parse(data)
if(response_data.user){
location.href="{% url " rel="external nofollow" login" %}"
}else {
//
$("form span").html("")
$(".has-feedback").removeClass("has-error")
$.each(response_data.error_msg,function (fiel, error_info) {
//
$("#id_"+fiel).parent().addClass("has-error");
$("#id_"+fiel).next().html(error_info[0]);// //
if(fiel=="__all__"){
$("#id_repeta_pwd").next().html(error_info[0]).css("color","red")
}
})
}
}
})
}
</script>FileReader 는 주로 파일 내용 을 메모리 에 읽 는 데 사용 되 며,일련의 비동기 인 터 페 이 스 를 통 해 메 인 스 레 드 에서 로 컬 파일 에 접근 할 수 있 습 니 다.
FileReader 대상 을 사용 하면 웹 프로그램 은 사용자 컴퓨터 에 저 장 된 파일(또는 원본 데이터 버퍼)내용 을 비동기 적 으로 읽 을 수 있 으 며,File 대상 이나 Blob 대상 을 사용 하여 처리 할 파일 이나 데 이 터 를 지정 할 수 있 습 니 다.
디자인 RegisterForm 구성 요소
from django import forms
from . import models
from django.forms import widgets
from django.core.exceptions import NON_FIELD_ERRORS, ValidationError
class RegisterForm(forms.Form):
nik_name = forms.CharField(max_length=32,
widget=widgets.TextInput(attrs={"class":"form-control"}),
error_messages={"required":" "})
email = forms.EmailField(widget=widgets.EmailInput(attrs={"class":"form-control"}),
error_messages={"required":" ", "invalid":" "})
password = forms.CharField(min_length=5, widget=widgets.PasswordInput(attrs={"class":"form-control"}),
error_messages={"required": " ",
"min_length":" 5 ",
}
)
repeta_pwd = forms.CharField(widget=widgets.PasswordInput(attrs={"class":"form-control"}),
error_messages={"required": " "})
def clean_nik_name(self):
name = self.cleaned_data.get("nik_name")
users = models.UserInfo.objects.filter(nik_name=name)
if not users:
return name
else:
raise ValidationError(" ")
def clean(self): //
pwd = self.cleaned_data.get("password")
repeta_pwd = self.cleaned_data.get("repeta_pwd")
if pwd and repeta_pwd:
if pwd == repeta_pwd:
return self.cleaned_data
else:
raise ValidationError(" ")
else:
return self.cleaned_data
def post(self,request):
reg_response = {"user": None,"error_msg":""}
register_form = RegisterForm(request.POST)
if register_form.is_valid():
email = request.POST.get("email")
nik_name = request.POST.get("nik_name")
password = request.POST.get("password")
repeta_pwd = request.POST.get("repeta_pwd")
valid = request.FILES.get("valid_img") # request.FILES.get("")
if not valid:
valid = "avatardir/TIM 20171209211626.gif"
check_user = models.UserInfo.objects.create_user(username=nik_name,nik_name=nik_name, email=email,
password=password,
avatar=valid
) # ，
reg_response = {"user": "user", "error_msg": ""}
return HttpResponse(json.dumps(reg_response))
else:
reg_response["error_msg"]=register_form.errors
return HttpResponse(json.dumps(reg_response))
avatar = models.FileField(upload_to='avatar/', default="/avatar/default.gif", verbose_name=" ")upload_to:기본 폴 더 를 루트 디 렉 터 리 에 만 듭 니 다.지정 한 위치 로 만 들 려 면 setting 에서 media 를 설정 해 야 합 니 다.
예 를 들 어 사용자 가 업로드 한 파일 을 따로 저장 하고 setting 에서 설정 하 기 를 바 랍 니 다.
MEDIA_ROOT= os.path.jion(BASE_DIR,"blog","media")
// ， ， “putImg” ，“putImg”， “putImg” 。
# media
url(r"^media/(?P<path>.*)",sever,{"document_root":setting.MEDIA_ROOT})주의:
server ， django.views.static import server
from . import settings //url 위 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 Ajax 와 forms 구성 요 소 를 바탕 으로 등록 기능 을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Javascript Ajax에 대한 간단한 연습저는 약 4년 동안 프로그래밍 개인 튜터로 일한 경험이 있습니다. 약 5년 전에 " "이라는 제목의 페르시아어로 내 웹사이트에 블로그 게시물을 올렸고 사람들이 저에게 전화하기 시작했습니다. 나는 항상 사람들을 가르치...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
