在更新记录之前使用模态验证用户

Question

我正在使用 PHP、MySQL 和 Bootstrap 开发 Web 应用程序。在更新产品记录 (prod_update.php) 之前，我希望弹出一个模式并询问用户的用户名和密码。

当用户名或密码不正确时，会有另一个模式说凭据不正确。当凭据有效时，它将重定向到主窗体 (prod_all.php)。

prod_update.php

Authentication Modal

Answer 1

问题太多，范围太广，实现所有步骤的方法太多

假设您有 prod_update.php，其中包含用户想要更新的表单

当用户单击 Update Prodoucts 模式打开时，可以使用数据属性 data-toggle 和 data-modal。

所以Update Products按钮可以

<button type="button" data-toggle="modal" data-target="#LoginModal" class="btn btn-info" >Open Modal</button>

使用 data-backdrop="static" data-keyboard="false" 登录模态框，因此在模态框外单击时不会关闭模态框 window

<div id="LoginModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Login Modal</h4>
      </div>
      <div class="modal-body">
        <form id="LoginForm">
        Login Username & Password Form can come here
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="UserLogin">Authenticate</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

现在，当用户尝试登录时（对于登录表单，您可以选择，只需要客户端验证，同时进行客户端和服务器端验证，或者只需要服务器端验证，跳过它们，由您决定）

Ajax 登录用户的方法调用

$(document).ready(function(){
    $(document).on("click","#UserLogin",function() {
        //Ajax method call for user to login
        $.ajax({
            type : 'post',
            url : 'userlogin.php', //Here you will check user and login 
            data :  $('#LoginForm').serialize(), //Login Form
            success : function(response){
                if(response.status=='success') {
                        $('#LoginModal').modal('hide'); //Hide login modal if all good
                        window.location.href = 'prod_all.php';
                        //for jQuery redirect check end of the answer 
                }
                if(response.status=='error') {
                        $('#ErrorModal').modal('show');
                        $('#LoginError').html(response.message);
                }
            }
        });
    });
});

userlogin.php

<?php
    header('Content-Type: application/json');
    //Database Connection
    //use isset to check if form posted
    //escape the string
    //run query to check username & password against database
    if((num_rows)>0) {
            $response['status'] = "success";
    } else {
            $response['status'] = "error";
            $response['message'] = "<div class='alert alert-danger'>Invalid Username or Password</div>";
    }
    echo json_encode($response);
?>

而错误模态可以是

<div id="ErrorModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <div id="LoginError"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

要在成功登录后重定向用户，请参阅 this 答案了解详细信息和所有可能的解决方案。

免责声明

如果您想在客户端验证登录，您可能需要更改 ajax 调用并强烈建议使用像 bootstrapvalidator 这样的验证插件并处理 ajax里面调用submithandler
当登录错误消息模态显示时，您可能会或将会遇到奇怪的行为，bootstrap 不支持堆叠模态，因此您可能需要一些变通方法，此特定问题已在在 post 另一个问题之前搜索了很多次。

在更新记录之前使用模态验证用户

Validate user using modal before updating records

php

mysql

ajax

jquery

bootstrap-modal