django - 单击Django表单中的按钮后Ajax无法正常工作

Question

我有一个使用 AJAX 的登录表单。我计划调用一个 API 并使用 JWT 取回令牌。但是，单击按钮时，AJAX 调用不起作用，我仍在登录页面中。

这是我到目前为止所做的：

视图.py：

def login(request):
    return render(request, 'myapp/login.html')

class LoginAPI(APIView):
    permission_classes = [AllowAny]
    def post(self, request, format = None):
        username = request.data['username'] 
        password = request.data['password'] 

        new_user = authenticate(username = username, password = password)
        if new_user is not None:
            url = 'http://localhost:8000/api/token/' 
            values = {
                'username' : username,
                'password' : password
            }
            r = requests.post(url, data = values) 
            token_data = r.json() 
            return Response(token_data)
        else:
            return Response({"status" : "Denied"}, status=status.HTTP_400_BAD_REQUEST)

登录.html：

{% extends 'users/base.html' %}
{% load static %}
{% load crispy_forms_tags %}

{% block javascript %}
    <script src='{% static "myapp/js/main.js" %}'></script>
{% endblock %}

{% block content %}
    <div class="content-section">
        <form method="POST">
            {% csrf_token %}     
             Usernam> <input id="username" type="text" name="username" value="" required="">

             Password <input id="password" type="password" name="password" value="" required=""> 
             <button id ='login_button' type="button" value="submit" > Login </button> 
        </form>
    </div>

{% endblock content %}

主.js：

$(document).ready(function() {
$('#login_button').click(function () {
    var username = $('#username').val();
    var password = $('#password').val();    
    $.ajax({
        cache: false,
        method: 'POST',  
        url: "/login_api/",
        data: {username:username, password: password},
        datatype: 'json',
        success: function(data) {  
            console.log(data.access);
            localStorage.setItem('access', data.access);
            window.location.href = 'http://127.0.0.1:8000/interface.html'; 
        });
});
});

base.html：

#script tags included in base template
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    {% block javascript %}{% endblock javascript %}  

网址.py：

urlpatterns = [

    path('admin/', admin.site.urls),
    path('login/', my_views.login, name = 'login'),
    path('login_api/', LoginAPI.as_view(), name = 'login_api'),
]

单击“登录”按钮时，未调用 AJAX，因此未访问 API，并且我未收到任何令牌。我该如何解决这个问题？我哪里错了？

标签： djangodjango-rest-frameworkjwt