Форма входа django с использованием ajax

Question

У меня есть форма входа в Django, и я хочу перенаправить пользователя на целевую страницу, если пароль и имя пользователя совпадают, и показать сообщение с предупреждением, если вход в систему не удалось, и в конечном итоге показать ошибку проверки, если форма отправлена пустой.

Когда я отправляю форму, используя правильные учетные данные, пользователь регистрируется, но в форме не отображается сообщение, в журнале сервера у меня есть это сообщение 09 / Май / 2019 23:35:52] "POST / логин / HTTP / 1.1" 200 7560 когда я отправляю пустую форму, у меня есть это сообщение Неверный запрос: / логин / [09 / Май / 2019 23:36:53] "POST / логин / HTTP / 1.1" 400 0 и когда я отправляю неправильные учетные данные, у меня есть это сообщение [09 / Май / 2019 23:37:36] "POST / логин / HTTP / 1.1" 200 61

Это моя HTML-форма

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

Это мои 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()

Это мой js файл

$('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 */
               }
              });
            });

Если кто-нибудь может помочь мне настроить мой код, чтобы он работал так, как я описал, я буду более чем благодарен.

Answer 1

Наконец мне удалось решить проблему, внеся некоторые изменения в представление. Это рабочий код:

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']);  
               }
              });
            });