一个简单的表单页面
有：用户名、密码、验证吗，验证是否正确
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<style type="text/css">
input[type=text],input[type=password], select {
width: 100%;
padding: 12px;
display: inline-block;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=button] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button] {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.form-group {
text-align: left;
}
.col-md-3, .col-md-9 { float: left; }
.col-md-3 {
width:25%;
margin-top: 6px;
}
.col-md-9 {
width:75%;
margin-top: 6px;
}
.form-group:after {
content: "";
display: table;
clear:both;
}
@media screen and (max-width: 600px) {
.col-md-3, .col-md-9, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<form method="post" enctype="application/x-www-form-urlencoded" action="/login/">
{% csrf_token %}
<div class="error"></div>
<div class="form-group">
<div class="col-md-3">
<label for="username">用户名:</label>
</div>
<div class="col-md-9">
<input type="text" id="username" placeholder="username" autofocus name="username">
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label>密码:</label>
</div>
<div class="col-md-9">
<input type="password" id="password" placeholder="password" name="password">
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label>验证吗:</label>
</div>
<div class="col-md-9">
<input type="text" id="code" placeholder="code" name="password">
</div>
</div>
<div class="form-group">
<input id="btn" type="button" value="提交">
</div>
</form>
</div>
</div>
</body>
</html>
插入ajax scrpit
<script>
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0;i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); }
}
}
$(document).ready(function() {
$('#btn').click(function() {
$.ajax({
url: '/auth/',
type: 'post',
data: {
'username': $("#username").val(),
'password': $("#password").val(),
'code': $("#code").val(),
},
beforeSend: function(xhr){
xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
},
success: function(data){
var data = JSON.parse(data);
if (data) {
$(".error").html(data.message).css({'color':'red'});
}
}
});
});
});
</script>
备注：JQuery的$.ajax函数用法：
$.ajax({name:value, name:value, ... })
beforeSend(xhr) | 发送请求前运行的函数,xhr为XMLHTTPRequest对象 |
success(result,status,xhr) | 当请求成功时运行的函数。 |
type | 规定请求的类型（GET 或 POST） |
data | 规定要发送到服务器的数据。 |
url | 规定发送请求的 URL。默认是当前页面。 |
Django py
urls.py
urlpatterns = [
path('test/', views.test),
path('index/', views.index),
path('login/', views.login),
path('auth/', views.auth),
]
views.py
def login(request: HttpRequest):
return render(request, 'test_login.html')
def auth(request):
if request.method != 'POST':
redirect('login/')
username = request.POST.get('username')
password = request.POST.get('password')
code = request.POST.get('code')
dic = {}
if code != '123':
dic['message'] = '验证吗错误！'
elif username != 'root' or password != '123':
dic['message'] = '用户名或密码错误！'
else:
dic['message'] = '验证成功！'
return HttpResponse(json.dumps(dic))
浏览器效果:
上次用了javascript，这里用JQuery通过$.ajax里的k/v来查找可以更方便和直观。
