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

2021-04-28 12:51:52 阅读：124 来源： 互联网

标签：判断 name 用户注册 models request ajax arg data

相关配置代码如下：
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">
    <style>
        .err{
            color: red;
        }
    </style>
</head>
<body>
    <div class="rg_layout">
        <div class="rg_left">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
        </div>
        <div class="rg_center">
            <div class="rg_form">
                <form action="/register" method="post">
                {% csrf_token %}
                    <table>
                        <tr><!--label 标签的作用是当点击文字也会跳到文本输出框-->
                            <!--for属性与ID属性对应规定 label 绑定到哪个表单元素。-->
                            <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><!--label 标签的作用是当点击文字也会跳到文本输出框-->
                            <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="image/verify_code.jpg" id="img_check">#}
{#                            </td>#}
                        </tr>
                        <tr>
                            <td colspan="2" align="center"  >
                                <div id="btn_sub" >注册</div>
{#                                <input type="submit" value="注册" id="btn_sub">#}
                            </td>
                        </tr>

                    </table>
                </form>
            </div>
        </div>
        <div class="rg_right">
            <p>已有账号？<a href="/login">立即登录</a></p>
        </div>
    </div>
</body>
<script src="/static/js/jquery-3.5.1.min.js"> </script>
<script>
    $("#btn_sub").click(function (){
        var data={}
        data['username']=$("#username").val()
        data['password']=$("#password").val()
        data['email']=$('#email').val()
        data['birthday']=$('#birthday').val()
        data['name']=$('#name').val()
        data['tel']=$('#tel').val()
        data['gender']=$('input:radio[name="gender"]:checked').val();
        $.ajax({
            data:data,
            dataType:"json",
            "type":"POST",
            "url":'/register',
            "success":function (arg){
                if(arg.status=="ok"){
                    window.location.replace("/login")
                }else if(arg.msg=="用户已存在"){
                    $(".user_err").text(arg.msg)
                }else if(arg.msg=="性别为必选项"){
                    $(".gender_err").text(arg.msg)
                }else if(arg.msg=="日期为必选项"){
                    $(".birthday_err").text(arg.msg)
                }
            }
        })
    })
</script>
</html>

*{
    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;
}

<1>.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表示请求方法

debug:

jQuery 取选中的radio的值方法

$('input:radio[name="gender"]:checked').val();

2.ajax 用get请求可以匹配url，post报错
“django.urls.exceptions.NoReverseMatch: Reverse for '<WSGIRequest: POST '/login'>' not found. '<WSGIRequest: POST '/login'>' 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={}

标签：判断,name,用户注册,models,request,ajax,arg,data
来源： https://blog.51cto.com/linzb/2739160

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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