我正在研究一个jquery函数来发布带有ajax的登录表单。在 ajax 成功中:如果登录成功,我想以不同的方式处理响应。
所以在 Django 中,我想知道我是否可以在现有的登录视图上添加一些成功/错误变量,与返回的页面一起发送回 jquery 函数。我的意思是保持视图默认工作,但也添加一个额外的"状态"变量。
这方面的一个小例子会很棒!
你的 views.py
def logmein(request):
username= request.GET.get('username')
password = request.GET.get('pwd')
stayloggedin = request.GET.get('stayloggedin')
if stayloggedin == "true":
pass
else:
request.session.set_expiry(0)
user = authenticate(username=username, password=password)
if user is not None:
if user.is_active:
login(request, user)
return HttpResponse('fine')
else:
return HttpResponse('inactive')
else:
return HttpResponse('bad')
你的阿贾克斯
function logmein() {
var username = $.trim($('#username').val());
var pwd = $.trim($('#pwdlogin').val());
var stayloggedin = document.getElementById('stayloggedin').checked;
$.ajax({
url : "/logmein/",
type : "get",
data : {
username: username,
pwd : pwd,
stayloggedin : stayloggedin,
next : next
}
}).done(function(data) {
if (data == "fine") {
window.location = window.location;
}
});
}
你需要设置一个 jquery Ajax 调用来发布到 django 中的登录视图。
在视图中,您需要执行以下操作...
import json
from django.http import HttpResponse
def login(request):
if request.method == 'POST':
login_form = AuthenticationForm(request, request.POST)
response_data = {}
if login_form.is_valid():
response_data['result'] = 'Success!'
response_data['message'] = 'You"re logged in'
else:
response_data['result'] = 'failed'
response_data['message'] = 'You messed up'
return HttpResponse(json.dumps(response_data), content_type="application/json")
我还没有测试过这个,但你的 ajax 调用应该看起来像这样。
<script>
$.ajax({
type:"POST",
url: 'http://www.yousite.com/yourview/login/',
data: $('#login_form').serialize(),
success: function(response){
// do something with response
response['result']; // equals 'Success or failed';
response['message'] // equals 'you"re logged in or You messed up';
}
});
</script>
这是一个老问题,但万一其他人遇到这个问题,这就是我所做的。请注意:
- 我扩展了默认的 Django 身份验证系统,以使用电子邮件地址代替用户名。(即使您使用默认值,我的代码仍然应该有效)
- 我还使用了 Django Rest Framework 状态代码(但同样这是可选的)
- 你需要设置默认的 Django 注册模板,如此处所示
在您的 views.py 中:
from django.shortcuts import render
from django.http import JsonResponse
from rest_framework import status
# Show the login page
def showLoginPage(request):
return render(request,'registration/login.html',{})
# Actual login logic using AJAX
def login_request(request):
if request.is_ajax and request.method == "POST":
context = {}
email = request.POST['username']
password = request.POST['password']
account = authenticate(request,username=email, password=password)
if account is None :
context['message1'] = 'Invalid Login Details!'
context['message2'] = 'Kindly Try Again With A Valid Email And Password'
context['code']=status.HTTP_401_UNAUTHORIZED
return JsonResponse(context, status = 200)
elif account is not None and not account.is_active:
context['message1'] = 'Sorry, your account is in-Active'
context['message2'] = 'Kindly Check Your Email For Activation Link Or Contact Support'
context['status'] = 'Error!'
context['code']=status.HTTP_401_UNAUTHORIZED
return JsonResponse(context, status = 200)
elif account :
login(request, account)
context['message'] = 'Successfully authenticated.'
context['status'] = 'Success!'
context['code']=status.HTTP_200_OK
return JsonResponse(context, status = 200)
else:
context['message'] = 'Invalid credentials'
context['message2'] = 'Kindly Try Again With A Valid Email And Password'
context['code']=status.HTTP_401_UNAUTHORIZED
return JsonResponse(context, status = 200)
return JsonResponse({}, status = 200)
urls.py:
# default page = login page
path('', views.showLoginPage, name='login'),
# ajax login
path('post/ajax/loginUser', views.login_request, name='loginUser'),
# home page once logged in
path('home/', views.home, name='home'),
登录.html:
<!-- this div displays our response from the ajax post -->
<div id="login_error_div" style="display: none;" class="alert alert-warning alert-dismissible fade show text-center" role="alert">
<strong><span id="error1"></span></strong>
<span id="error2"></span>
<button id="hide_msg" type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- a hidden url to re-direct to the home page if successful -->
<input type="hidden" id="Urlhome" data-url="{% url 'home' %}" />
<script src="/static/plugins/jquery/jquery.min.js"></script>
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}else{
sign_in_User()
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
<script>
const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#id_password');
togglePassword.addEventListener('click', function (e) {
// toggle the type attribute
const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
password.setAttribute('type', type);
// toggle the eye slash icon
this.classList.toggle('fa-lock-open');
});
</script>
<script>
$("#hide_msg").click(function (){
$("#login_error_div").hide()
});
</script>
<script>
function sign_in_user() {
var url = $("#Urlhome").attr("data-url");
event.preventDefault();
event.stopPropagation();
var username = ($('#id_username')).val();
var password = ($('#id_password')).val();
$.ajax({
url: "{% url 'loginUser' %}",
type: "POST", // or "get"
headers: {'X-CSRFToken': '{{ csrf_token }}'}, // for csrf token
data:{
'username': username,
'password':password,
},
success: function loginResponse(response) {
if(response['code']=== 401){
$('#login_error_div').show();
$("#error1").text(response['message1']+' :')
$("#error2").text(response['message2'])
} else {
location.href=url;
}
}
});
}
</script>