django+ajax实现前后端分离登录功能

不想说太多，直接上代码，相信有点代码功底的人都能看懂~

1、后端代码如下：

def login_user(request):
    if request.method == 'POST':
        username = request.POST.get('username')//'username'为前端data中定义的变量名
        password = request.POST.get('password')
        rs = models.Login.objects.values().filter(userName=username,passWord=password)
        if rs :
            return JsonResponse({'success':'200','msg':'登录成功'})//返回json格式
        else:
            return JsonResponse({'success':'201','msg':'登录失败'})

代码内容就不做过多解释了，键值对内容随便定义，主要用来给到前端进行跳转判断，也可以写data:'200'，自己喜欢怎么写就怎么写，只要是key:value格式即可

2、前端代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#sub").click(function () { //定义sub事件
                var username = $("#uname").val(); //定义变量
                var password = $("#pwd").val();
                $.ajax({
                    type: "POST", //请求方式
                    url: 'http://127.0.0.1:8765/LoginUser', //请求的接口地址
                    data: {
                        username: username, //服务端请求的数据，前者username代表django获取前端的变量名，后者username代表上面定义的变量名
                        password: password,
                    },
                    dataType: "JSON", //返回数据格式，前端要求json格式，后端就必须返回json格式的数据
                    success: function (data) { //data为自定义变量，也可以写成success
                        if (data.success == '200') { //success为后端返回的key值，也可以用msg进行判断
                            alert("棒棒棒,登录成功！") //弹出提示框
                            window.location.href = "/chenggong.html" //跳转到成功页
                            return true
                        }
                        if (data.success == '201') {
                            alert("用户名或密码错误,请重新输入！")
                            window.location.href = "/shibai.html" //跳转到失败页
                            // window.location.reload()
                            return false
                        }
                    },
                })
            })
        })
    </script>
</head>

<body>
    <form>
        <!-- 这里面的id就等于js中的#uname -->
        <input type="text" id="uname" name="username" placeholder="用户名"><br>
        <input type="password" id="pwd" name="password" placeholder="密码"><br>
    </form>
    <!-- 这里面的id就等于js中的#sub，只有点击登录按钮，才会走完所有js代码逻辑 -->
    <input type="button" id="sub" name="登录" value="登录">
</body>

</html>

每行代码注释的很详细了，再不懂我就真的没办法了。

接下来看效果图：如下

记得先开启python服务哦

python manage.py runserver 0.0.0.0:8765

登录页

成功页面如下

失败页面如下

以上就是最简单的一个django+ajax前后端分离的登录demo

为了方便学习，我把失败改为停留登录页，不做跳转，并把后端返回参数截出来，大家一看就懂，代码如下：

if (data.success == '201') {
                            alert("用户名或密码错误,请重新输入！")
                            // window.location.href = "/shibai.html" //跳转到失败页
                            // window.location.reload()
                            return false
                        }

只要把跳转失败页面这行代码注释掉即可

页面不跳转，后端返回json数据如下：

红框中的内容和django写的一模一样，后端怎么写，前端就怎么返回，并且前端通过返回的数据进行判断，我是用success的状态码进行判断，也可以用msg的内容进行判断，当然也可以用其他的，只要后端多写几个返回值即可

以上就是本次全部内容，还有很多东西没有做，就靠自己发挥咯~

上海-阿拉Chen

发布了142 篇原创文章 · 获赞 70 · 访问量 31万+

私信关注

django+ajax实现前后端分离登录功能

猜你喜欢