环境:windows 10 x64 下的 PyCharm
使用html + jquery实现
吼吼,做个人论坛的时候用到了这个,就做了一个小demo供大家参考一下。
本demo利用Ajax技术实现对登录表单的检验,假设正确的用户名和密码分别是 大猫 和 123.
成果图:
一、表单页面 index.html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function formcheck() {
let username = $('input[name=username]')[0].value;
let password = $('input[name=password]')[0].value;
$.get('/login_check/', {'username': username, 'password': password},
function (ret) {
if(ret == 'username'){
$('#message').text('用户名不存在!');
}
else if(ret == 'password'){
$('#message').text('密码错误!');
}
else if(ret == 'success'){
$('#message').text('登陆成功!');
}
});
}
</script>
</head>
<body>
<form action="/login_check/">
<input type="text" name="username" placeholder="请输入名字" onblur="formcheck()"><br>
<input type="password" name="password" placeholder="请输入密码" onblur="formcheck()"><br>
<input type="submit" value="提交">
<p id="message"></p>
</form>
</body>
</html>
其中onblur事件是在用户离开输入框后触发,
οnblur="formcheck()"意味着一旦用户离开输入框则触发js的formcheck函数
再来看formcheck函数做了一些什么:
其中 $('input[name=username]') 是一个jquery函数,它捕获了所有name为username的输入框
$('input[name=username]')[0].value 则是获取第一个名字为username的输入框的值
$.get(url, param, function)也是一个jquery函数
1.url是在urls.py文件中映射的一个views.py里的函数
这里的‘/login_check/’调用了Django后台的验证函数
2.param是传递参数,这里是一个字典dict
3.function是异步get获得返回值后将要执行的函数
二、Django的views.py部分代码
from django.shortcuts import render, HttpResponse
# Create your views here.
def login_check(request):
username = request.GET.get('username')
password = request.GET.get('password')
if username != '大猫':
return HttpResponse('username')
else:
if password != '123':
return HttpResponse('password')
else:
return HttpResponse('success')
def index(request):
return render(request, 'index.html')
三、Django的urls.py文件
from django.contrib import admin
from django.urls import path
from Login.views import login_check, index
urlpatterns = [
path('admin/', admin.site.urls),
path('', index),
path(r'login_check/', login_check),
]