Question

我是ajax的新手，我希望用户能够使用此登录表单登录，如果密码不正确，它会告诉他在不刷新页面的情况下登录无效，该表单包含在引导模式中在检查了一些答案和一些教程之后，这是我尝试过的：

我的表格中有一个普通的登录表格。py

在我的观点中。py

signin_form = SigninForm()
user = request.user
if request.method == "POST":
    if 'signin_form' in request.POST:
        signin_form = SigninForm(request.POST)
        if signin_form.is_valid():
            email = request.POST['email']
            password = request.POST['password']
            user = authenticate(email=email, password=password)
            data['email'] = email
            data['password'] = password
            data['stat'] = "ok"
            return JsonResponse(data)
            if user:
                login(request, user)
            elif user is None:
                messages.error(request, 'ُEmail or password is incorrect')
        else:
            data['stat'] = "error"

模板中的表单

  <form action="" method="POST" id="form-signin">
                            {% csrf_token %}

                                    {{signin_form.email}}
                              
                                    {{signin_form.password}}

                            <button class="btn btn-success" id="signin-btn" type="submit" name="signin_form">Sign in</button>

                            {% for message in messages %}

                            <div class="alert alert-danger "> {{ message }}</div>

                            {% endfor %}

                        </form>

在我的js文件中

    $(function () {
    
      $("#signin-btn").click(function () {
          $.ajax({
              type: 'POST',
              data: $("#form-signin").serialize(),
              success: function (data, status) {
                  if (data['stat'] == "ok") {
                      $('#joinus').modal('hide');
                  }
                  else {
                      $('#joinus').html(data);
                      $('#joinus').modal('show');
                  }
              }
          });

使用所有这些代码，当我单击“提交”时，出现一个空白页面，该页面仅具有json响应，这是出现的示例：

{“电子邮件”：“ myemail@gmail.com”，“密码”：“ mypassword”，“统计”：“确定”}

如果我做的所有事情都不对，请说明我做过很多问题的方法，但没有一个让我明白这一点

Answer 1

根据您提供的代码，我不太了解，但我知道您为什么会收到该JSON响应。问题是您在代码中返回Jsonresponse的时间过早。

if signin_form.is_valid():
        email = request.POST['email']
        password = request.POST['password']
        user = authenticate(email=email, password=password)
        data['email'] = email
        data['password'] = password
        data['stat'] = "ok"
        return JsonResponse(data) --> return before excuting the rest of the code
        if user:
            login(request, user)
        elif user is None:
            messages.error(request, 'ُEmail or password is incorrect')

在调用return语句后，我知道的任何编码语言都不会执行代码。为什么要在空白页中执行此操作？我的猜测是您成功加载了一个空白窗口。在成功部分中，您可以做的是在Bootstrap中创建if else语句和.prop()无效属性，在该属性上输入字段给出错误。

success: function (data) {
              if (data['stat'] == "ok") {
                //redirect to the login page
              }
              else {
                  //make a if else to show which field is giving error
                  if (data['error'] = 'username){
                   $('#{{signin_form.email.auto_id}}').prop();
                  }
                  //continue the code here....
              }
          }

希望这能满足您的问题。

Django登录表单和Bootstrap模式下使用Ajax进行表单验证

1 个答案: