我正在使用jquery函数发布带有ajax的登录表单。在ajax成功:如果成功登录,我想以不同的方式处理响应。
所以在Django中,我想知道我是否可以在现有的login-view上构建,添加一些成功/错误变量,以便与返回的页面一起发送回jquery函数。我的意思是保持视图默认工作,但也添加一个额外的“状态”变量。
这方面的一个小例子很棒!
答案 0 :(得分:4)
您需要设置jquery Ajax调用以发布到django中的Login视图。
在视图中你需要做这样的事情......
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>
答案 1 :(得分:2)
你的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')
你的ajax
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;
}
});
}
答案 2 :(得分:0)
这是一个古老的问题,但是如果其他人遇到了这个问题,这就是我所做的。请注意:
在您的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'),
login.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>