Django Ajax login form
Solution 1
Although it's certainly better practice to do this with a json, you can get away without, assuming you're not really passing much info back from the server. On the django side swap out the HttpResponseRedirect for an HttpResponse using the redirect URL as your message. Also add an HttpResponseForbidden for the case that ajax login fails.
def login(request):
if request.method == 'POST':
request.session.set_test_cookie()
login_form = AuthenticationForm(request, request.POST)
if login_form.is_valid():
if request.is_ajax:
user = django_login(request, login_form.get_user())
if user is not None:
return HttpResponse(request.REQUEST.get('next', '/'))
return HttpResponseForbidden() # catch invalid ajax and all non ajax
else:
login_form = AuthenticationForm()
c = Context({
'next': request.REQUEST.get('next'),
'login_form': login_form,
'request':request,
})
return render_to_response('login.html', c, context_instance=RequestContext(request))
Then on the javascript side, check the status code of the response. If it's 200, then that's your HttpResponse - you want to redirect to the url in the response message. If it's a 403, then that's your HttpResponseForbidden - login has failed. You can get away with a standard 'login failed' error message.
$.ajax({
type:"POST",
url: $(this).attr('action'),
data: $('#login_form').serialize(),
// the success function is called in the case of an http 200 response
success: function(response){
// redirect to the required url
window.location = response;
},
error: function(xhr, ajaxOptions, thrownError){
alert('login failed - please try again');
},
});
I'm afraid I haven't tested this, but it should give you an idea.
For more info look at the docs for django's HttpResponse objects. Then check out the jquery ajax docs.
Solution 2
return HttpResponseRedirect(request.REQUEST.get('next', '/'))
You obviously cant use that if you are doing ajax , the client must be responsible of the redirection/display/whatever is sent back in the Ajax response. If the login is successful , send a JSON response telling the client to redirect itself( with javascript redirection ) , if it is not , send a JSON response with the list of errors and display them using javascript.
user1462141
Updated on June 30, 2022Comments
-
user1462141 almost 2 years
I am trying to submit a login form using ajax. I am confused as to how I am supposed to handle the exceptions/successful responses. I am getting a 200 OK from the server and the form returns error's either by the password/username field. How can I get a error message for to display or redirect the user to the appropriate page depending on the server response?
JQUERY:
56 $(window).load(function(){ 57 $('#login_form').submit(function(e){ 58 e.preventDefault(); 59 var request_url = document.getElementById('next').value 60 $.ajax({ 61 type:"POST", 62 url: $(this).attr('action'), 63 data: $('#login_form').serialize(), 64 success: function(response){ $('#msg').text(response); 65 console.log(response); 66 }, 67 error: function(xhr, ajaxOptions, thrownError){ alert( $('#login_error').text('Username already taken. Please select another one.')}, 68 }); 69 }); 70 });VIEW: UPDATED
51 def login(request): 52 if request.method == 'POST': 53 request.session.set_test_cookie() 54 login_form = AuthenticationForm(request, request.POST) 55 if login_form.is_valid(): 56 if request.is_ajax: 57 user = django_login(request, login_form.get_user()) 58 if user is not None: 59 return HttpResponseRedirect(request.REQUEST.get('next', '/')) **else:** 61 **return HttpResponseForbidden() # catch invalid ajax and all non ajax** 60 else: 61 login_form = AuthenticationForm(request) 62 63 c = Context({ 64 'next': request.REQUEST.get('next'), 65 'login_form': login_form, 66 'request':request, 67 }) 68 return render_to_response('login.html', c, context_instance=RequestContext(request))FORM:
7 <tt id="login_error"></tt> 8 <form id="login_form" action="" method="post"> 9 10 {{ login_form }} 11 <input type="submit" value="login"/> 12 <input type="hidden" id="request_path" name="next" value="/"/> 13 </form> 14 <p>{{ request.get_full_path }}</p> 15 <tt id='msg'></tt>