Question

我有一个登录表单，我希望客户端发送AJAX POST请求，如下所示，并进行错误处理。如果验证/身份验证错误，我不会将页面重新加载或刷新到与POST请求处理程序(/users/login/)对应的网址，其中包含从login视图收到的JSON字符串响应。我尝试使用event.preventDefault()按照SO上的许多回答的建议，但无法使其正常工作。关于这里出了什么问题的任何线索？我不认为这是一个Django问题。我知道onsubmit被触发，因为窗口重定向到具有预期JSON字符串响应的POST处理程序URL /users/login/ - {"error": ["Entered mobile number is not registered"]}

JQuery代码

$("#loginform").on('submit', function(event) {
            event.preventDefault();
            alert("Was preventDefault() called: " + event.isDefaultPrevented());
            console.log("form submitted!");
            var url = "/users/login/";

            $.ajax({
                type: "POST",
                url:url,
                data: $("#loginform").serialize(),
                success: function(data)
                {
                    console.log(data);
                    var result = JSON.stringify(data);
                    if(result.indexOf('errors')!=-1 ){
                        console.log(data);
                        if(data.errors[0] == "Mobile number and password don't match")
                        {
                            $('.login-error').text("Mobile number and password don't match");
                        }

                        else if(data.errors[0] == "Entered mobile number is not registered")
                        {
                            $('.login-error').text("Entered mobile number is not registered");
                        }

                    }

                    else
                    {
                        window.open("/users/profile/");
                    }

                    //var result = JSON.stringify(data);
                    // console.log(result);

                }
            })

    });

查看处理程序

def login(request):
    if request.method == 'POST':
        mobile_number = request.POST.get('mobile_number', '')
        password = request.POST.get('password', '')

        data = {}

        user_queryset = User.objects.filter(mobile_number=mobile_number)

        if len(user_queryset) == 0:
            data['error'] = []
            data['error'].append("Entered mobile number is not registered")
            # return JsonResponse(data)

        elif len(user_queryset) == 1:
            email = user_queryset[0].email

            user = auth.authenticate(email=email, password=password)

            if user is not None:
                auth.login(request, user)

            else:
                data['error'] = []
                data['error'].append("Mobile number and password don't match")

        return JsonResponse(data)

HTML代码

<div class="container-fluid bg-primary" id="login">
        <div class="row">
            <div class="col-lg-3 text-center">
            </div>
            <div class="col-lg-6 text-center">
            <h1>&nbsp;</h1><h3>&nbsp;</h3>
                <h2 class="section-heading">Login to your profile</h2>
                <hr>
            </div>
            <div class="col-lg-3 text-center">
            </div>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
        </div>
        <div class="col-md-4 col-md-offset-4 ">
            <form id='loginform' action='/users/login/' method='post' accept-charset='UTF-8'>
            {% csrf_token %}
                <fieldset >
                    <div class="form-group">
                        <input type="text" name="mobile_number" id="mobile_number" tabindex="1" class="form-control" placeholder="Mobile Number" value="">
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Enter Password">
                        </div>
                </fieldset>
                <button type="submit" class="btn btn-primary btn-xl btn-block">LOG IN</button><br><br>
                <span class="login-error"></span>
                <h1>&nbsp;</h1><h1>&nbsp;</h1>
            </form>
        </div>
    </div>

Answer 1

除了<style name="popupTheme" parent="ThemeOverlay.AppCompat.Light"> <item name="android:textColorPrimary">@color/myTextColor</item> <item name="android:colorBackground">@color/myPopupBackgroundColor</item> </style>之外，在这种情况下也可以调用event.preventDefault();。

Answer 2

使用：＆＃39; event.preventDefault（）＆＃39;或者＆＃39;返回false＆＃39;在ajax电话之后。

Django JQuery AJAX提交表单POST请求刷新页面

2 个答案: