Question

登录表单（单独的文件）：

<div class="" id="login-form">
  <img class="Lpic" src="img/loginpic.png">
  <div class="fieldtext">
    <h2 class="text-center">Login</h2>
  </div>
  <div>

    <?php
      if($_POST)
      {
        //form validation
        if(empty($_POST['Email']) || empty($_POST['Password']))
        {
          $errors[] = 'Please enter email and password';
        }

        //check if email exists
        $query = $db->query("SELECT * FROM users WHERE Email = '$email'");
        $user = mysqli_fetch_assoc($query);
        $userCount = mysqli_num_rows($query);
        if($userCount < 1)
        {
          $errors[] = 'Unknown email, pleas verify';
        }

        if(password_verify($password, $user['Password']))
        {
          $errors[] = 'Password doesn\'t match, try again';
        }


        if(!empty($errors))
        {
          echo display_errors($errors);
        }else{
          //log user in
          $user_id = $user['ID'];
          login($user_id);
        }
      }
    ?>

  </div>
  <form action="Login.php" method="post">
    <div class="inputfield">
      <div class="form-group">
        <label for="Email">Email</label>
        <input type="email" name="Email" id="Email" value="<?=$email;?>">
      </div>
      <div class="form-group">
        <label for="Password">Password</label>
        <input type="password" name="Password" id="Password" value="<?=$password;?>">
      </div>
    </div>
    <div class="form-group">
      <input type="submit" value="Login" class="btn btn-success btn-block">
      <a href="../shop/Mainshop.php" class="btn btn-default center-block">Cancel</a>
    </div>
  </form>
</div>

登录表单中使用的功能：

function login($user_id)
  {
    $_SESSION['OpenWorld'] = $user_id;
    global $db;
    $date = date("Y-m-d H:i:s");
    $db->query("UPDATE users SET Last_Login = '$date' WHERE ID = '$user_id'");
    $_SESSION['success_flash'] = "You are now logged in";
    header('Location: ../shop/Mainshop.php');
  }


function display_errors($errors)
  {
    $display = '<ul class="bg-danger danger-pos">';
    foreach($errors as $error)
    {
      $display .= '<li class="text-danger">'.$error.'</li>';
    }
    $display .='</ul>';
    return $display;
  }


if(isset($_SESSION['success_flash']))
    {
        echo '<div class="bg-success"><p class="text-success text-center">'.$_SESSION['success_flash'].'</p></div>';
        unset($_SESSION['success_flash']);
    }

我希望弹出此模式，而不是消息“您现在已登录”，该模式会在x秒后消失

模式：（单独的文件）

<div class="welcome-modal modal-bg" id="welcome-modal">
  <div class="welcome-text">
    <div class="message-bg">
      <p class="message-text">Welcome <?=$user_data['First'];?></p>;
    </div>
  </div>
  <div class="G-image">
    <img src="../../global-img/welcome.png">
  </div>
</div>

我尝试了此javascript（在用户登录后进入的页面上）

$(document).ready(function (){
    $.ajax({
      url : '/Cybernetics/Admin/Login.php',
      method : "post",
      success : function(){
          $(window).on('load', function(){
            $('#welcome-modal').modal('show');
          })
      }
    });
  });

我真的不知道我在这里做些什么，我对javascript和php不太了解。 PS：包含bootstrap js ... TIA

Answer 1

在ajax成功时无需使用$(window).on('load', function()。

您可以立即在Ajax成功后显示模态
，然后set a timeout使其在x毫秒后消失

success : function(){
    $('#welcome-modal').modal('show');
    setTimeout(function(){ $('#welcome-modal').modal('hide'); }, 2500);
}

演示：

$(document).ready(function() {
  $('#welcome-modal').modal('show');
  setTimeout(function() {
    $('#welcome-modal').modal('hide');
  }, 2000);
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="welcome-modal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <p>Welcome User.</p>
      </div>
    </div>
  </div>
</div>

登录成功后在页面加载中显示模式

1 个答案: