Heim > Artikel > Web-Frontend > Implementierung einer Registrierungsfunktion basierend auf Ajax und Formularkomponenten (einschließlich Code)
Implementierung einer Registrierungsfunktion basierend auf Ajax und Formularkomponenten (einschließlich Code)
- 亚连Original
- 2018-05-21 16:14:141736Durchsuche
Dieser Artikel teilt Ihnen die Registrierungsfunktion basierend auf Ajax und bildet Komponenten durch Beispielcode. Freunde, die sie benötigen, können darauf verweisen
Front-End-HTML
<!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">
<p class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<p class="navbar-header">
<img src="{{ getstatic }}img/TIM截图20180205110238.png">
</p>
<!-- Collect the nav links, forms, and other content for toggling -->
<p 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>
</p><!-- /.navbar-collapse -->
</p><!-- /.container-fluid -->
</nav>
<p class="container body-box" style="height: 567px;">
<p class="center-block body-content">
<!--头部提示-->
<p class="hidden-xs title-top col-sm-12">
注册新用户
<hr class="head-hr">
</p>
<p class="form-wrap">
<form class="form-horizontal col-sm-8 form-padding" role="form" id="registerForm" method="post"
novalidate="novalidate">
<!--每一行-->
<p 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">
</p>
<p class="form-group">
<p class="col-sm-2 control-label">
<label class="w4-2" for="Email">邮 箱</label>
</p>
<p class="col-sm-10 has-feedback">
{{ register_form.email }}
<span class="text-danger"></span>
</p>
</p>
<p class="form-group">
<p class="col-sm-2 control-label">
<label class="w4-4" for="DisplayName">昵称</label>
</p>
<p class="col-sm-10 has-feedback">
{{ register_form.nik_name }}
<span class="text-danger field-validation-error"><span id="DisplayName-error"></span></span>
</p>
</p>
<p class="form-group">
<p class="col-sm-2 control-label">
<label class="w4-2" for="Password">密 码</label>
</p>
<p class="col-sm-10 has-feedback">
{{ register_form.password }}
<span class="text-danger field-validation-error"></span>
</p>
</p>
<p class="form-group">
<p class="col-sm-2 control-label">
<label class="w4-4" for="ConfirmPassword">确认密码</label>
</p>
<p class="col-sm-10 has-feedback">
{{ register_form.repeta_pwd }}
<span class="text-danger field-validation-error"><span id="mobile-error"></span></span>
</p>
</p>
<!--注册按钮-->
<p class="form-group">
<p 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="登录">
</p>
</p>
<!--协议提示-->
<p class="col-sm-offset-2 register-sign">
<span class="asterisk">*</span> “注册” 按钮，即表示您同意并愿意遵守 <a class="look-agreeon" target="_blank"
href="//passport.cnblogs.com/agreement.html">用户协议</a>。
</p>
<!--hidden-->
{% csrf_token %}
</form>
<p class="hidden-xs col-sm-4 side-img-box">
<p class="side-line">
<p></p>
</p>
<img src="{{ getstatic }}img/registersideimg.png">
</p>
</p>
</p>
</p>
<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>
Der obige Code ist nur HTML und im Beispiel unten befindet sich JavaScript
<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 wird hauptsächlich zum Einlesen von Dateiinhalten in den Speicher verwendet. Über eine Reihe asynchroner Schnittstellen kann im Hauptthread auf lokale Dateien zugegriffen werden.
Mithilfe von FileReader-Objekten können Webanwendungen asynchron den Inhalt von Dateien (oder Rohdatenpuffern) lesen, die auf dem Computer des Benutzers gespeichert sind. Sie können File-Objekte oder Blob-Objekte verwenden, um die zu verarbeitenden Dateien oder Daten anzugeben.
Design RegisterForm-Komponente
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
Server
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))
Bild von Userifor im Modell
avatar = models.FileField(upload_to='avatar/', default="/avatar/default.gif", verbose_name="主键")
Hinweis:
upload_to: Standardmäßig wird der Ordner im Stammverzeichnis erstellt, wenn er an einem angegebenen Speicherort erstellt wird , es muss sich in der Einstellung Medien konfigurieren befinden.
Zum Beispiel: Sie möchten, dass die vom Benutzer hochgeladenen Dateien separat gespeichert und in der Einstellung konfiguriert werden
MEDIA_ROOT= os.path.jion(BASE_DIR,"blog","media")
//此时，用户上传文件时，先创建并将文件保存至“putImg”文件夹中，“putImg”，然后将“putImg”放至对应的路径中。
# media 配置
url(r"^media/(?P<path>.*)",sever,{"document_root":setting.MEDIA_ROOT})
Nach der Konfiguration oben URL, der Benutzer kann auf alle Dateien im Medienordner zugreifen
Hinweis:
server ，是从django.views.static import server导入 from . import settings //url中的使用
Das Obige habe ich für alle organisiert und hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
Detaillierte Erläuterung der Schritte zur Verwendung von Ajax
Eine Zusammenfassung von drei Methoden zur Erzielung von Cross- Domänenzugriff mit Ajax
JQuery verwendet AjaxDetaillierte Schritte zum Abrufen von Daten über Domänen hinweg
Das obige ist der detaillierte Inhalt vonImplementierung einer Registrierungsfunktion basierend auf Ajax und Formularkomponenten (einschließlich Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ajax-Methode zur Implementierung einer autorisierten Anmeldung auf der WeChat-Webseite (grafisches Tutorial)Nächster Artikel：Ajax-Methode zur Implementierung einer autorisierten Anmeldung auf der WeChat-Webseite (grafisches Tutorial)
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse