时间戳

首页 > 解决方案 > 使用 Django 和 Ajax 登录什么都不做

jquery - 使用 Django 和 Ajax 登录什么都不做

问题描述

这是我的表格：

<form action="#" method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="exampleInputEmail1">Enter Username:</label>
        <input type="text" class="form-control" id="username" name="username" placeholder="Username" autocomplete="off">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">Enter Password:</label>
        <input type="password" class="form-control" id="password" name="password" placeholder="Password" autocomplete="off">
    </div>
    <button class="btn btn-primary" id = 'login_button'>Login</button>
</form>

和脚本：

<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script>
    var login_button = $('#login_button')

    login_button.click(function(){
        var username = $('#username').val()
        var password = $('#password').val()


        $.ajax({
            url: '{% url 'td_app:do_login' %}',
            type: 'get',
            data: {
                'username': username,
                'password': password
            },
            dataType: 'json',
            success: function (data){
                console.log(data.result)
            }
        }).done(function (){
            console.log(data.result)
        })
    })
</script>

在我的views.py中：

def do_login(request):
    username = request.GET.get('username')
    password = request.GET.get('password')

    user = authenticate(username=username, password=password)
    data = {}

    if user:
        if user.is_active:
            login(request, user)
            data['result'] = 'success'
            return HttpResponseRedirect(reverse('td_app:index'))

    else:
        data['result'] = 'failed'

return JsonResponse(data)

最后是我的 urls.py：

url(r'^api/do_login/$', views.do_login, name='do_login')

然而，所有这些都不起作用，它甚至没有给我任何错误。它只是完全刷新了整个页面并且什么都不做。success我尝试在and部分放置警报，done但它没有显示出来。

有什么想法/建议吗？非常感谢！

更新

我试着print在我的views.py上加上一个：

def do_login(request):
    print('A login was attempted!')

    username = request.GET.get('username')
    password = request.GET.get('password')

但是当我从 ajax 执行登录时，不会调用 print。它也没有给我任何错误，例如“与您的视图的连接无效等”。

更新 2

我尝试更改我的 jquery 脚本（感谢@AlwaysHelping）：

login_button.click(function(event){
        event.preventDefault()
        var username = $('#username').val()
        var password = $('#password').val()


        $.ajax({
            url: '{% url 'td_app:do_login' %}',
            type: 'POST',
            data: {
                'username': username,
                'password': password
            },
            dataType: 'json',
            success: function (data){
                alert('asdasdas')
            },
            error: function(data){
                alert('there was an error')
            }
        })

我将其更改type: 'get'为type: 'POST'并添加了一个error部分。现在，当我单击按钮时，它会给我错误警报，当我检查网络控制台时，它会说POST http://127.0.0.1:8000/app/api/do_login/ 403 (Forbidden)

标签： jquerydjangoajaxdjango-views

解决方案

首先，您需要在单击功能中使用preventDefault停止每次重新加载页面表单的方法。e.preventDefault()

event.preventDefault()

其次，您get的 ajax 中有一个请求，但您正在执行 POST，因此将其更改为 POST 以发送values到django视图。

type: POST

最后，您不需要.done方法，ajax因为您使用的成功功能应该足够了。

推荐阅读