Django Ajax Login Form

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 fo

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 urlwindow.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.