使用ajax登录表单django

Question

I have a login form of Django and i want to redirect user to the landing page if the password and the username is matching and to show an alert message if the login is failed and eventually show a validation error if the form is submitted empty.

When i submit the form using the right credentials the user is logged but no message is shown on the form, on the server log i have this message 09/May/2019 23:35:52] "POST /login/ HTTP/1.1" 200 7560 when i submit an empty form i have this message Bad Request: /login/ [09/May/2019 23:36:53] "POST /login/ HTTP/1.1" 400 0 and when i submit a wrong credentials i have this message [09/May/2019 23:37:36] "POST /login/ HTTP/1.1" 200 61

This is my html form

            <div id="cd-login"> <!-- log in form -->
                  <div class="login_div"></div>
                <form id="login_form" class="cd-form" action="{% url 'login' %}" method="POST">
                {% csrf_token %}
                    <p class="fieldset">
                        <label class="image-replace cd-email" for="signin-email">E-mail</label>
                        <input class="full-width has-padding has-border" id="username" type="text" name="username" placeholder="E-mail">
                        <span class="cd-error-message">Error message here!</span>
                    </p>

                    <p class="fieldset">
                        <label class="image-replace cd-password" for="signin-password">Password</label>
                        <input class="full-width has-padding has-border" id="password" type="text" name="password"  placeholder="Password">
                        <a href="#0" class="hide-password">Hide</a>
                        <span class="cd-error-message">Error message here!</span>
                    </p>

                    <p class="fieldset">
                        <input class="full-width" type="submit" value="Login">
                    </p>
                </form>

                <p class="cd-form-bottom-message"><a href="#0">Forgot your password?</a></p>
                <!-- <a href="#0" class="cd-close-form">Close</a> -->
            </div> <!-- cd-login -->

This is my views.py

def ajax_login(request):
    if request.method == 'POST':
        username = request.POST.get('username', '').strip()
        password = request.POST.get('password', '').strip()
        if username and password:
            # Test username/password combination
            user = authenticate(username=username, password=password)
            # Found a match
            if user is not None:
                # User is active
                if user.is_active:
                    # Officially log the user in
                    return render(request, 'issueresolver/landing_page.html')

                else:
                    data = {'success': False, 'error': 'User is not active'}
            else:
                data = {'success': False, 'error': 'Wrong username and/or password'}

            return HttpResponse(json.dumps(data), content_type='application/json')

    # Request method is not POST or one of username or password is missing
    return HttpResponseBadRequest()

This my js file

$('form').on('submit', function(e) { e.preventDefault()
                $.ajax({
                  type:"POST",
                  url:  $(this).attr('action'),  
                  data: $('#login_form').serialize(),
                  beforeSend: function (xhr, settings) {
                      var csrftoken = Cookies.get('csrftoken');
                      function csrfSafeMethod(method) {
                          // these HTTP methods do not require CSRF protection
                          return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
                      }
                      if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                          xhr.setRequestHeader("X-CSRFToken", csrftoken);
                      }
                  },
                  success: function(response){

                    /* here i am supposed to redirect user if login success and show an alert error message if the login is failed */
               }
              });
            });

If any one can help me adjusting my code to be working as i described i will be more than grateful.

Answer 1

Finally i managed to solve the issue making some changes to the view. This is the working code :

def ajax_login(request):
    if request.method == 'POST':
        username = request.POST.get('username', '').strip()
        password = request.POST.get('password', '').strip()
        response_data = {}
        if username and password:
            # Test username/password combination
            user = authenticate(username=username, password=password)
            # Found a match
            if user is not None:
                login(request, user)
                response_data['result'] = 'Success!'
                response_data['message'] = 'You"re logged in'
            else:
                response_data['result'] = 'Failed!'
                response_data['message'] = 'Login Failed, Please check your credentials'

            return HttpResponse(json.dumps(response_data), content_type="application/json")  

    return render(request, 'login.html')

ajax call

$('form').on('submit', function(e) { e.preventDefault()
                $.ajax({
                  type:"POST",
                  url:  $(this).attr('action'),  
                  data: $('#login_form').serialize(),
                  beforeSend: function (xhr, settings) {
                      var csrftoken = Cookies.get('csrftoken');
                      function csrfSafeMethod(method) {
                          // these HTTP methods do not require CSRF protection
                          return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
                      }
                      if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                          xhr.setRequestHeader("X-CSRFToken", csrftoken);
                      }
                  },
                  success: function(response){
                    if (response['result'] == 'Success!')
                        window.location = '/';
                    else
                        alert(response['message']);  
               }
              });
            });