Implementierung einer Registrierungsfunktion basierend auf Ajax und Formularkomponenten (einschließlich Code)-js-Tutorial-php.cn

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>

Nach dem Login kopieren

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=&#39;csrfmiddlewaretoken&#39;]").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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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))

Nach dem Login kopieren

Bild von Userifor im Modell

avatar = models.FileField(upload_to=&#39;avatar/&#39;, default="/avatar/default.gif", verbose_name="主键")

Nach dem Login kopieren

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 dem Login kopieren

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中的使用

Nach dem Login kopieren

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!