利用ajax对用户注册进行判断-低调大师

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

2021-04-28 501

相关配置代码如下：
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>

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

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

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

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={}

补充：登录时的认证检查与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">
    <style>
        .err{
            color: red;
            font-size: 1%;
        }
    </style>
<body>
<div class="main">
    <div class="title">
        <span>密码登录</span>
    </div>

    <div class="title-msg">
        <span>请输入登录账户和密码</span>
    </div>

    <form class="login-form" method="post" novalidate >
        <!--输入框-->
        <div class="input-content">
            <!--autoFocus-->
            <div class="user_err err"></div>
            <div>
                <input type="text" autocomplete="off"
                       placeholder="用户名" name="username" required/>
            </div>
             <div class="pwd_err err"></div>
            <div style="margin-top: 16px">
                <input type="password"
                       autocomplete="off" placeholder="登录密码" name="password" required maxlength="32"/>
            </div>
        </div>

        <!--登入按钮-->
        <div style="text-align: center">
{#            <button type="submit" class="enter-btn" >登录</button>#}
            <div class="enter-btn">登录</div>
        </div>

        <div class="foor">
            <div class="left"><span>忘记密码 ?</span></div>

            <div class="right"><a href="register"><span>注册账户</span></a></div>
        </div>
        {% csrf_token %}
    </form>

</div>
</body>
    <script src="/static/js/jquery-3.5.1.min.js"> </script>
    <script>
        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("input");
                opt.name = x;
                opt.value = PARAMS[x];
                temp.appendChild(opt);
            }
            document.body.appendChild(temp);
            temp.submit();
            return temp;
        }

        $(".enter-btn").click(function (){
            var data=$("form").serialize()   //序列化取得表单数据
            $.ajax({
                url:/login/,
                data:data,
                type:"POST",
                dataType:"json",
                success(arg){
                    if(arg.status=="err"){
                        console.log(arg)
                        if(arg.msg=="用户不存在"){
                            $(".user_err").text(arg.msg)
                        }
                        if(arg.msg=="密码错误")
                            $(".pwd_err").text(arg.msg)
                    }else {
                        postdata= "{\"" +data.replace(RegExp("=","g"),"\":\"").replace(RegExp("&",'g'),"\",\"")+ "\"}";
                        data=JSON.parse(postdata)
                        post('/index',data)
                    }
                }
            })

        })
    </script>
</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)

微信关注我们

原文链接：https://blog.51cto.com/linzb/2739160

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

10行C++代码实现高性能HTTP服务

前言是不是觉得C++写个服务太累，但又沉迷于C++的真香性能而无法自拔？作为一个老牌C++程序员（可以看我 github 上十几年前的C++项目：https://github.com/kevwan ），这几天听一个好友跟我聊起他写的C++框架，说极简代码即可完成各种C++服务的开发，不禁让我心生好奇！于是我去研究了一下，发现确实有点意思！实战（干货）话不多说，我们来一起看看，10行C++代码怎么实现一个高性能的Http服务，轻松QPS几十万。Linus说：talk is cheap，show me the code ↓ int main() { WFHttpServer server([](WFHttpTask *task) { task->get_resp()->append_output_body("Hello World!"); }); if (server.start(8888) == 0) { getchar(); // press "Enter" to end. server.stop(); } return 0; } 这个 server ...

2021-04-28

393

Redis详解（十）------ 集群模式详解，从集群如何分区，如何原生搭建，如何快速搭建，以及如何扩容，收缩等各方面详细介绍集群在上一篇博客我们介绍了------Redis哨兵(Sentinel)模式,哨兵模式主要是解决高可用问题,在master节点宕机时,slave节点能够自动切换成为master节点本篇博客我们来介绍Redis的另外一种模式------集群模式. PS：我这里搭建演示的版本是redis-5.0.5，这个版本对于集群搭建会有很大的简化，比如最常用的redis-trib.rb脚本功能已经集成到redis-cli工具中了，具体下面会详细介绍。 1、为什么需要集群? ①、并发量通常来说,单台Redis能够执行10万/秒的命令,这个并发基本上能够满足我们所有需求了,但有时候比如做离线计算,为了更快的得出结果,有时候我们希望超过这个并发,那这个时候单机就不满足我们需求了,就需要集群了. ②、数据量通常来说,单台服务器的内存大概在16G-256G之间,前面我们说Redis数据量都是存在内存中的,那如果实际业务要保存在Redis的数据量超过了单台机器的内存,这个时候最简单...

2021-04-28

510

资源下载

更多资源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。