ajax请求常常没进入回调函数

Question

问题描述

想用django框架实现简易登入网页, 流程如下

1. 前端login网页利用ajax发送帐号密码
2. 后端views接收到帐号密码后回送讯息
3. 前端ajax的回调函数done接到讯息, 若是登入成功则跳转首页

但前端登入网页点击按钮后常常没反应

问题出现的环境背景及自己尝试过哪些方法

使用postman测试回传结果没问题, 但使用网页测试时常常没反应, 好几次才成功跳转一次, 利用chrome开发者工具单步测试也是没问题.

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

• 前端login网页帐号密码输入框

                        <form method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="form-group">
                                <input class="form-control" placeholder="User" id="userid" name="userid" type="text" autofocus>
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="Password" id="password" name="password" type="text" value="">
                            </div>
                            <div class="btn-group">
                                <button type="submit" class="btn btn-success" id="btn_login">Login</button>
                                <button type="button" class="btn btn-default" id="btn_register">Sigh Up</button>
                            </div>
                        </form>

• 前端login网页ajax请求

    <script type="text/javascript">
        $("#btn_login").click(function () {
            var user_id = $('#userid').val();
            var passwd = $('#password').val();
            $.ajax({
                url: '{% url "login_check" %}',
                data: {"user_id":user_id, "passwd":passwd},
                type: 'POST',
                dataType: 'json',
            })
            .done(function(data){
                console.log("status: "+data.status);
                if(data.status === 1) {
                    window.location.replace('{% url "index" %}');
                }
            })
            .fail(function(data){
                console.log("error");
            });
        });
    </script>

*后端处理ajax请求

@csrf_exempt
def login_check(request):
    status = 0
    if(request.method == "POST"):
        user = request.POST['user_id']
        password = request.POST['passwd']
        user = auth.authenticate(username=user, password=password)
        if(user is not None):
            if(user.is_active):
                auth.login(request, user)
                status = 1
    data = {"status":status}
    return JsonResponse(data)

你期待的结果是什么？实际看到的错误信息又是什么？

期待每次点击登入后即可跳转

Answer 1

有几点不是很清楚：
1、你用了form表单，为啥又要用ajax发送数据
2、django有自动跳转的，为啥你还要jQuery来做跳转？
下面是我的代码，可以给你参考下：
可以用next来获取登录前的页面，用

return HttpResponseRedirect(next)

来跳转

或者用

return HttpResponseRedirect(reverse('index'))

来跳转到首页

def Login(request,template='xxxxxxx.html'):
    msg = ''
    next = request.GET.get('next', '')
    if request.method == 'POST':
        username = request.POST['user']
        password = request.POST['passwd']
        next = request.POST['next']
        print next
        user = authenticate(username=username, password=password)
        print username,password
        if user is not None:
            if user.is_active:
                login(request, user)
                if next:
                    return HttpResponseRedirect(next)
                return HttpResponseRedirect(reverse('index'))
            else:
                msg = u"用户已禁用"
        else:
            msg = u'用户名或者密码错误'
    context = {
        'msg': msg,
        'next': next,
    }
    return render(request, template, context)

Answer 2

如果点击登入打印data.status = 1了，那就把这个换下写法

window.location.replace('{% url "index" %}');