基於Ajax和forms元件實作註冊功能（含程式碼）-js教程-PHP中文網

首頁

web前端

js教程

基於Ajax和forms元件實作註冊功能（含程式碼）

亚连

May 21, 2018 pm 04:14 PM

ajax 實現

本文透過實例程式碼給大家分享了基於Ajax和forms元件實作註冊功能,需要的朋友可以參考下

前端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>

登入後複製

上面的程式碼只是HTML ，而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>

登入後複製

##FileReader#FileReader主要用於將檔案內容讀入內存，透過一系列非同步接口，可以在主線程中存取本地文件。

使用FileReader對象，web應用程式可以非同步的讀取儲存在使用者電腦上的檔案(或原始資料緩衝)內容，可以使用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))

登入後複製

#Model中Userifor 的img

avatar = models.FileField(upload_to=&#39;avatar/&#39;, 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})

登入後複製

配置好上面的url 後，使用者可以造訪media 資料夾下面的所有檔案

注意：

 server ，是从django.views.static import server导入
　　　  from . import settings //url中的使用

登入後複製

#上面是我整理給大家的，希望今後對大家有幫助。

Ajax使用步驟詳解

#Ajax實作跨域存取三種方法總結

jQuery使用

ajax跨網域取得資料步驟詳解

以上是基於Ajax和forms元件實作註冊功能（含程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7843

Java教學

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1241

Related knowledge

華為手機如何實現雙微信登入？ Mar 24, 2024 am 11:27 AM

華為手機如何實現雙微信登入？隨著社群媒體的興起，微信已成為人們日常生活中不可或缺的溝通工具之一。然而，許多人可能會遇到一個問題：在同一部手機上同時登入多個微信帳號。對於華為手機用戶來說，實現雙微信登入並不困難，本文將介紹華為手機如何實現雙微信登入的方法。首先，華為手機自帶的EMUI系統提供了一個很方便的功能－應用程式雙開。透過應用程式雙開功能，用戶可以在手機上同

PHP程式設計指南：實作斐波那契數列的方法 Mar 20, 2024 pm 04:54 PM

程式語言PHP是一種用於Web開發的強大工具，能夠支援多種不同的程式設計邏輯和演算法。其中，實作斐波那契數列是一個常見且經典的程式設計問題。在這篇文章中，將介紹如何使用PHP程式語言來實作斐波那契數列的方法，並附上具體的程式碼範例。斐波那契數列是一個數學上的序列，其定義如下：數列的第一個和第二個元素為1，從第三個元素開始，每個元素的值等於前兩個元素的和。數列的前幾元

PHP 與 Ajax：建立一個自動完成建議引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax建置自動完成建議引擎：伺服器端腳本：處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本：發送Ajax請求並顯示建議(autocomplete.js)。實戰案例：在HTML頁面中包含腳本並指定search-input元素識別碼。

如何在華為手機上實現微信分身功能 Mar 24, 2024 pm 06:03 PM

如何在華為手機上實現微信分身功能隨著社群軟體的普及和人們對隱私安全的日益重視，微信分身功能逐漸成為人們關注的焦點。微信分身功能可以幫助使用者在同一台手機上同時登入多個微信帳號，方便管理和使用。在華為手機上實現微信分身功能並不困難，只需要按照以下步驟操作即可。第一步：確保手機系統版本和微信版本符合要求首先，確保你的華為手機系統版本已更新至最新版本，以及微信App

掌握Golang如何實現遊戲開發的可能性 Mar 16, 2024 pm 12:57 PM

在現今的軟體開發領域中，Golang（Go語言）作為一種高效、簡潔、並發性強的程式語言，越來越受到開發者的青睞。其豐富的標準庫和高效的並發特性使它成為遊戲開發領域的一個備受關注的選擇。本文將探討如何利用Golang來實現遊戲開發，並透過具體的程式碼範例來展示其強大的可能性。 1.Golang在遊戲開發中的優勢作為靜態類型語言，Golang正在建構大型遊戲系統

如何在Golang中實現精確除法運算 Feb 20, 2024 pm 10:51 PM

在Golang中實現精確除法運算是一個常見的需求，特別是在涉及金融計算或其它需要高精度計算的場景中。 Golang的內建的除法運算子「/」是針對浮點數計算的，並且有時會出現精度遺失的問題。為了解決這個問題，我們可以藉助第三方函式庫或自訂函數來實現精確除法運算。一種常見的方法是使用math/big套件中的Rat類型，它提供了分數的表示形式，可以用來實現精確的除法運算

如何解決jQuery AJAX報錯403的問題？ Feb 23, 2024 pm 04:27 PM

如何解決jQueryAJAX報錯403的問題？在開發網頁應用程式時，經常會使用jQuery來發送非同步請求。然而，有時在使用jQueryAJAX時可能會遇到錯誤代碼403，表示伺服器禁止存取。這種情況通常是由伺服器端的安全性設定所導致的，但可以透過一些方法來解決這個問題。本文將介紹如何解決jQueryAJAX報錯403的問題，並提供具體的程式碼範例。一、使

PHP遊戲需求實作指南 Mar 11, 2024 am 08:45 AM

PHP遊戲需求實現指南隨著網路的普及和發展，網頁遊戲的市場也越來越火爆。許多開發者希望利用PHP語言來開發自己的網頁遊戲，而實現遊戲需求是其中一個關鍵步驟。本文將介紹如何利用PHP語言來實現常見的遊戲需求，並提供具體的程式碼範例。 1.創造遊戲角色在網頁遊戲中，遊戲角色是非常重要的元素。我們需要定義遊戲角色的屬性，例如姓名、等級、經驗值等，並提供方法來操作這些

See all articles

基於Ajax和forms元件實作註冊功能（含程式碼）

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題