Django---ajax登录案例

Django—ajax登录案例

今天学习了Django的时候做登录案例遇到的情况:
在Django中如果没有关闭crsf验证直接做表单提交类的会错。

登录页面前端代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <script src="static/js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $('#btn').click(function () {
                //获取用户名和密码

                $username = $('#username').val()
                $password = $('#password').val()

                // 发起ajax请求
                $.ajax({
                    'url': '/login_check',
                    'type': 'post',
                    'data': {'username': $username, 'password': $password},
                    'dataType': 'json'

                }).success(function (data) {
                    if(data.res == 1) {
                        location.href = '/index'
                    }
                    else
                    {
                        $('#msg').show().html('用户名或者密码错误')

                    }
                })
            })
        })
    </script>
    <style>
        #msg{
            display: none;
            color:red;
        }


    </style>
</head>
<body>
<div>

用户名:<input type="text" id="username" ></br>
密码:<input type="password" id="password" ></br>

<input type="button" value="登录" id="btn">
    <div id="msg"></div>
</div>

</body>
</html>

下面是views.py的处理函数:

def login(request):
    '''显示登录页面'''
    return render(request,'booktest/login.html')

def login_check(request):
    '''验证账号密码'''
    # 1.获取用户名密码
    username = request.POST.get('username')
    password = request.POST.get('password')

    # 2. 验证用户名密码
    if username == '123' and  password == '123':
        # 3. 返回页面
        return JsonResponse({'res':1})
    else:

        return JsonResponse({'res':0})


在账号密码错误时,通过ajax发送请求,实现局部刷新。而不是整体访问一次登录页面。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值