django登录表单和表单验证在引导模式中使用ajax

Posted 2023-02-24

【中文标题】django登录表单和表单验证在引导模式中使用ajax

【英文标题】：django login form and form validation with ajax in bootstrap modal

【发布时间】：2021-02-08 23:52:23

【问题描述】：

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

我的 forms.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 响应的空白页面，这里是出现的示例：

"email": "[e-mail]", "password": "mypassword", "stat": "ok"

如果我所做的一切都是错误的，请展示我的做法，我已经查看了很多问题，但没有一个让我明白这一点

【参考方案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 语句后都不会执行代码。为什么要在空白页中进行操作？我的猜测是您在 ajax 成功中加载了一个空白窗口。在成功部分你可以做的是在 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....
              
          

希望这能满足您的问题。

【讨论】：

我是新手，所以不知道如何使用这个 prop() 可以指导我使用完整的方法吗？

你可以用谷歌搜索指南，比如这个link