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"登录模态，因此在模态窗口外单击时不会关闭模态

<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之类的验证插件并处理submithandler内的ajax调用< / p>
当登录错误消息模式显示时，您可能会或将会遇到奇怪的行为，bootstrap不支持堆叠模式，因此您可能需要一些解决方法，此特定问题已经多次回答，以便在发布另一个之前进行搜索问题

在更新记录

1 个答案: