利用ajax对用户注册进行判断

太阳不下山

　　相关配置代码如下：
　　1.models.py

from django.db import models
# Create your models here.
GENDER = {
  ('male', '男'),
  ('female', '女'),
}
class User(models.Model):
  username=models.CharField(max_length=32,null=False)
  password=models.CharField(max_length=32,null=False)
  email = models.EmailField(null=True)
  name = models.CharField(max_length=20, null=True)
  tel = models.CharField(max_length=20, null=True)
  gender = models.CharField(max_length=20, choices=GENDER)
  birthday = models.DateTimeField(null=True)

　　2.settings 数据库、static改动

STATIC_URL = '/static/'
STATICFILES_DIRS = (
  os.path.join(BASE_DIR, "/cdnpanel/static"),
)
DATABASES = {
  'default': {
    'ENGINE': 'django.db.backends.mysql',
    'NAME': 'django',
    'USER': 'root',
    'HOST': 'localhost',
    'PORT': '3306',
    'PASSWORD': '123456',
  }
}

　　3.views服务端主程序

from django.core.exceptions import ValidationError
from django.db import IntegrityError
from django.shortcuts import redirect, render, HttpResponse
from cdnpanel.models import User,Domain
import json
def login(request):
  return render(request, "login.html")

def register(request):
  if request.method == "POST":
    ajax_rsp = {"status": "ok", "msg": None}
    try:
      if request.is_ajax():
        username= request.POST.get('username')
        password= request.POST.get('password')
        name= request.POST.get('name')
        email= request.POST.get('email')
        tel= request.POST.get('tel')
        gender= request.POST.get('gender')
        birthday= request.POST.get('birthday')
        if User.objects.filter(username=username).exists():
          ajax_rsp["status"]="err"
          ajax_rsp["msg"]="用户已存在"
        else:
          User.objects.create(
            username=username,
            password=password,
            email=email,
            name=name,
            tel=tel,
            gender=gender,
            birthday=birthday,
          )
    except IntegrityError:
      ajax_rsp["status"] = "err"
      ajax_rsp['msg']="性别为必选项"
    except ValidationError:
      ajax_rsp["status"] = "err"
      ajax_rsp['msg']="日期为必选项"
    return HttpResponse(json.dumps(ajax_rsp))
  else:
    return render(request, "register.html")

　　4.客户端register页面及其样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注册页面</title>
  
  <link rel="stylesheet" href="/static/css/register.css">
  
</head>
<body>
  
    
      新用户注册
      USER REGISTER
    
    
      
        <form action="/register" method="post">
        {% csrf_token %}
          <table>
            <tr>
              
              <td class="td_left"><label for="username">用户名</label> </td>
              <td class="td_right"><input type="text" name="username" id="username">
                <span class="user_err err"></span>
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="password">密码</label> </td>
              <td class="td_right"><input type="password" name="password" id="password"> </td>
            </tr>
            <tr>
              <td class="td_left"><label for="email">email</label> </td>
              <td class="td_right"><input type="email" name="email" id="email"> </td>
            </tr>
            <tr>
              <td class="td_left"><label for="name">姓名</label> </td>
              <td class="td_right"><input type="text" name="name" id="name"> </td>
            </tr>
            <tr>
              <td class="td_left"><label for="tel">手机号</label> </td>
              <td class="td_right"><input type="text" name="tel" id="tel"> </td>
            </tr>
            <tr>
              <td class="td_left">性别</td>
              <td class="td_right">
                <input type="radio" name="gender"  value="male">男
                <input type="radio" name="gender"  value="famale">女
                <span class="gender_err err"></span>
{#                加个span标签显示错误信息，默认为空值，err样式赋予红色字体   #}
              </td>
            </tr>
            <tr>
              <td class="td_left"><label for="birthday">出生日期</label> </td>
              <td class="td_right"><input type="date" name="birthday" id="birthday">
                <span class="birthday_err err"></span>
              </td>
            </tr>
            <tr>
{#              <td class="td_left"><label for="checkcode">验证码</label> </td>#}
{#              <td class="td_right">#}
{#                <input type="text" name="username1" id="checkcode">#}
{#                <img src="https://blog.51cto.com/linzb/image/verify_code.jpg" border="0">#}
{#              </td>#}
            </tr>
            <tr>
              <td colspan="2" align="center"  >
                注册
{#                <input type="submit" value="注册" id="btn_sub">#}
              </td>
            </tr>
          </table>
        </form>
      
    
    
      已有账号？立即登录
    
  
</body>

</html>

　　register.css

*{
  margin: 0px;/*所有的外边距为0*/
  padding: 0px;/*所有的内边距为0*/
  box-sizing: border-box;/*规定两个并排的带边框的框*/
}
body{
  background: url("image/register_bg.png")no-repeat center;
  padding-top: 25px;
}
.rg_layout{
  width: 900px;
  height: 500px;
  border: 8px solid #EEEEEE;/*solid 定义实线*/
  background-color: white;
  margin: auto;
}
.rg_left{
  float: left;
  margin: 15px;
}
.rg_left>p:first-child{
  color: #FFD026;
  font-size: 20px;
}
.rg_left>p:last-child{
  color: #A6A6A6;
  font-size: 20px;
}
.rg_center{
  float: left;
}
.rg_right{
  float: right;
  margin: 15px;
  padding-left: 50px;
}
.rg_right p{
  font-size: 15px;
}
.rg_right p a{
  color: coral;
}
.td_left{
  width: 100px;
  text-align: right;
  height: 45px;
}
.td_right{
  padding-left: 50px;
}
#username,#password,#email,#name,#tel,#birthday,#checkcode{
  width: 251px;
  height: 32px;
  border: 1px solid #A6A6A6;
  /*设置边框圆角*/
  border-radius: 5px;
  padding-left: 10px;
}
#checkcode{
  width: 110px;
}
#img_check{
  height: 32px;
  vertical-align: middle;/*设置图片的位置垂直居中*/
}
#btn_sub{
  width: 100px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background-color: #FFD026;
  border: 1px solid #FFD026;
  padding-left: 10px;
}

　　.ajax的作用

我们知道我们每次对服务器发送请求，服务器处理后都会发给我们一个页面，但是有时候我们两次发送请求的应该得到的页面是大同小异的，比如后台管理的时候增加一条数据，我只需要在页面上显示这条数据即可，其他关于页面的排版之类的是不需要动的，这个时候，重新接收一个页面显然是没必要的，于是ajax就出现了。
       ajax就是当你做了某个动作（比如鼠标移动到某个位置）后，偷偷地往后台发送数据，然后取得数据后偷偷地在前端处理并显示，所以不难想象ajax是包含在事件处理函数中，需要数据（data），提交的地方（url），收到响应后的处理函数等参数，格式如下：

　　funtion(){
　　$.ajax({

data:{"a":1},
      dataType:"json",  //当服务端返回json字符串，自动把接收的arg转为json对象，不加此句，则需obj=json.parse(arg)
      "type":"POST",
      "url":'/register',
      "success":function (arg){
        }
    })

}　　success代表处理成功函数，同理还有其他的函数
　　type表示请求方法

　　要点：
　　submit按钮要换成标签并绑定事件（submit提交会刷新页面）
　　为了提示错误信息，要在页面安插位置（我这里直接设一个空的span并赋予class方便查找设样式，ajax收到服务器错误信息直接赋值即可）
　　服务器返回有两种状态，还要保存信息，所以必然要返回两个字段（这里我用字典ajax_rsp赋值保存）

　　debug:

jQuery 取选中的radio的值方法

　　$('input:radio[name="gender"]:checked').val();
　　2.ajax 用get请求可以匹配url，post报错
　　“django.urls.exceptions.NoReverseMatch: Reverse for '' not found. '' is not a valid view function or pattern name.”
　　在url.py中排除半天，最后发现是views.register里面引用 redirect方法有误
　　错误：redirect(request,'login')
　　正确：redirect('/login')
　　可见，出现路径匹配错误是也要看看重定向等方法是否有误
　　3.ajax  data变量有值，但是post数据为空
　　查了半天，后面发现是因为定义变量时用了[],应该用{}表字典
　　错误：  var data=[]
　　正确：  var data={}

　　补充：登录时的认证检查与js跳转post传递参数
　　代码如下：
　　login.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
  <link href="static/css/login.css" rel="stylesheet">
  
<body>
  
    <span>密码登录</span>
  
  
    <span>请输入登录账户和密码</span>
  
  <form class="login-form" method="post" novalidate >
    
    
      
      
      
        <input type="text" autocomplete="off"
             placeholder="用户名" name="username" required/>
      
       
      
        <input type="password"
             autocomplete="off" placeholder="登录密码" name="password" required maxlength="32"/>
      
    
    
    
{#      <button type="submit" class="enter-btn" >登录</button>#}
      登录
    
    
      <span>忘记密码 ?</span>
      <span>注册账户</span>
    
    {% csrf_token %}
  </form>

</body>
  
  
</html>

　　login.css

body{
  background: #353f42;
}
*{
  padding: 0;
  margin: 0;
}
.main {
  margin: 0 auto;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 15px;
  width: 350px;
  height: 350px;
  background: #FFFFFF;
  /*以下css用于让登录表单垂直居中在界面,可删除*/
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -175px;
  margin-left: -175px;
}
.title {
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.title span {
  font-size: 18px;
  color: #353f42;
}
.title-msg {
  width: 100%;
  height: 64px;
  line-height: 64px;
}
.title:hover{
  cursor: default  ;
}
.title-msg:hover{
  cursor: default  ;
}
.title-msg span {
  font-size: 12px;
  color: #707472;
}
.input-content {
  width: 100%;
  height: 120px;
}
.input-content input {
  width: 330px;
  height: 40px;
  border: 1px solid #dad9d6;
  background: #ffffff;
  padding-left: 10px;
  padding-right: 10px;
}
.enter-btn {
  width: 350px;
  height: 40px;
  color: #fff;
  background: #0bc5de;
  line-height: 40px;
  text-align: center;
  border: 0px;
}
.foor{
  width: 100%;
  height: auto;
  color: #9b9c98;
  font-size: 12px;
  margin-top: 20px;
}
.enter-btn:hover {
  cursor:pointer;
  background: #1db5c9;
}
.foor div:hover {
  cursor:pointer;
  color: #484847;
  font-weight: 600;
}
.left{
  float: left;
}
.right{
  float: right;
}

　　view login处理部分

def login(request):
  if request.method == "POST":
    ajax_rep={"status":"err","msg":None}
    user=request.POST.get('username')
    pwd=request.POST.get('password')
    if not User.objects.filter(username=user).exists():
      ajax_rep['msg']="用户不存在"
    elif not User.objects.filter(username=user,password=pwd).exists():
      ajax_rep['msg']="密码错误"
    else:
      ajax_rep['status']='ok'
    return HttpResponse(json.dumps(ajax_rep))
  return render(request, "login.html")

　　登录多了个跳转传递参数的过程
　　debug：

1.登录完后用post 方式跳转
(程序摘抄自：https://www.cnblogs.com/xuejianbest/p/10284970.html)
function post(URL, PARAMS) {    
  var temp = document.createElement("form");    
  temp.action = URL;    
  temp.method = "post";    
  temp.style.display = "none";    
  for (var x in PARAMS) {    
    var opt = document.createElement("textarea");    
    opt.name = x;    
    opt.value = PARAMS[x];     
    temp.appendChild(opt);    
  }    
  document.body.appendChild(temp);    
  temp.submit();    
  return temp;    
}   
原理：
  <1>生成form表单，对其action进行复制
  <2>循环对PARAMS里面的参数，生成textarea标签并赋值
  <3>利用submit方法进行提交
格式：post('pages/statisticsJsp/excel.action', {html :prnhtml,cm1:'sdsddsd',cm2:'haha'});
2.javascrip键值对字符串转化为字典
源字符串：
  data=”username=linzb&password=123456&csrfmiddlewaretoken=GlBBlXJycO3yRKMP2fwJCM7OgkTikftqjTCg5PlRMpcbRwddDfUAYNDCKpDHaqyp“
处理：
  postdata= "{" +data.replace(RegExp("=","g"),"":"").replace(RegExp("&",'g'),"","")+ ""}";
  RegExp里面的=表示要替换掉=，g表示全局替换，不用这个只会替换第一个匹配到的字符串
  要引用1的函数，还需要：data=JSON.parse(postdata)
  
  3.关键部分：
            postdata= "{"" +data.replace(RegExp("=","g"),"":"").replace(RegExp("&",'g'),"","")+ ""}";
            data=JSON.parse(postdata)
            post('/index',data)

[python] 利用ajax对用户注册进行判断

相关帖子

电力猫怎么配对 TP-Link电力猫和扩展器配对教程

SQLite 基本命令使用方式

电力猫配对 TP-Link电力猫和扩展器配对教程

利用CSS禁止复制网页内容

怎么利用配置文件来管理多个 Node.js 进程

js数组之间如何进行连接

怎么在JavaScript中加注释

uni-app 利用canvas画简单海报并保存图片

利用html+js触发弹窗事件

太阳不下山 LV4