不想说太多,直接上代码,相信有点代码功底的人都能看懂~
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的内容进行判断,当然也可以用其他的,只要后端多写几个返回值即可
以上就是本次全部内容,还有很多东西没有做,就靠自己发挥咯~