PHP中的甜蜜警报

Posted

技术标签:

【中文标题】PHP中的甜蜜警报【英文标题】：Sweet Alert in PHP 【发布时间】：2018-07-25 16:25:42 【问题描述】：

我有2个文件，一个是login.php，另一个是loginprocess.php，我希望当我点击login.php中的提交按钮时，会弹出一个SweetAlert通知，它是一个成功登录然后重定向到另一个 .php 页面，当凭据不正确时，它会显示一个 swal 错误并再次返回登录。

登录表格：

这是我的代码：

登录.php

    <!DOCTYPE html>
<html>
<head>
    <title>Login Form</title>

  <script src="sweet\node_modules\sweetalert\dist\sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="sweet\node_modules\sweetalert\dist\sweetalert.css">

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"/> 

</head>
<body>
    <form action="student_logprocess.php" method="POST">
    <div class="container">
        <h2><center>Student Login Form</center></h2><hr>
         <h4><center>Please login to continue</center></h4>

         <div class="row">
   <div class="col-md-4 col-md-offset-4">
      <div class="panel panel-default">
         <div class="panel-body">
        <div class="form-group">
             <center><img src="img/user.png" class="img-circle img-thumbnail"   />
        </center>
             </div>

<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Username" name="txtusername" id="user">
</div>

<div class="form-group">
<input type="password" class="form-control input-lg" placeholder="Password" name="txtpassword" id="pw">
</div>

<div class="checkbox">
   <label>
      <input type="checkbox"> Remember me
   </label>
</div>


<button onclick="showmsg();" type="submit" class="btn btn-primary btn-lg btn-block" id="submit">Login</button>

  </div>
      </div>
 </div> 
</form>

<script type="text/javascript">
  function showmsg()
  

    var user = 'txtusername';
    var pw = 'txtpassword';

    var userName = document.getElementById('username').value;
    var passWord = document.getElementById('password').value;

  if((username == userName) && (pw == passWord)) 
    swal("Good job!", "Login Success!", "success");
  
  else
    swal("Oops...", "Invalid credentials!", "error");
  

</script>

  <script src="jquery-3.1.1.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

登录进程.php

    <?php
require_once('student_conn.php');

$fname = $_POST['txtusername'];
$password = $_POST['txtpassword'];

$sql=$db->prepare("SELECT * FROM lgn_student WHERE fname=:txtusername AND password=:txtpass");
$sql->bindParam(':txtusername',$fname);
$sql->bindParam(':txtpass',$password);
$sql->execute();

If($row=$sql->rowCount()<>0)
session_start();
$_SESSION['account']=true;

header('location:student_main.php');
else
    header('location:student_login.php');

?>

这里的问题是，我无法让它工作。我试过在这里搜索，但我不明白给出的代码..它对我不起作用..我使用 xampp 和 navicat 作为数据库..

lgn_student 是登录凭据表

提前谢谢你！

** 编辑（使用 Michael S. 的代码） **

student_login.php

    <!DOCTYPE html>
<html>
<head>
    <title>Login Form</title>

  <script src="sweet\node_modules\sweetalert\dist\sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="sweet\node_modules\sweetalert\dist\sweetalert.css">

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"/> 

</head>
<body>
    <form action="student_logprocess.php" method="POST">
    <div class="container">
        <h2><center>Student Login Form</center></h2><hr>
         <h4><center>Please login to continue</center></h4>

         <div class="row">
   <div class="col-md-4 col-md-offset-4">
      <div class="panel panel-default">
         <div class="panel-body">
        <div class="form-group">
             <center><img src="img/user.png" class="img-circle img-thumbnail"   />
        </center>
             </div>

<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Username" name="txtusername" id="user">
</div>

<div class="form-group">
<input type="password" class="form-control input-lg" placeholder="Password" name="txtpassword" id="pw">
</div>

<div class="checkbox">
   <label>
      <input type="checkbox"> Remember me
   </label>
</div>


<button type="submit" class="btn btn-primary btn-lg btn-block" id="submit">Login</button>

  </div>
      </div>
 </div> 
</form>

  <script type="text/javascript">
    $(function() 

         var username = $('#user').val(),
                password = $('#pw').val(),
                smb = $('#submit');

           smb.on('click', function(e)
              e.preventDefault();

              $.post( "/htdocs/0205_stud/student_logprocess.php", 
                    txtusername: username, txtpassword: password,
                    function( data )  
                      
                      var_dump( $sql->fetch() );die()
                      if(data.state == 1) 
                         swal("Good job!", "Login Success!", "success");
                         
                         window.location.href = "student_main.php";
                      
                      else
                         swal("Oops...", "Invalid credentials!", "error");
                    );
              ););

      </script>

  <script src="jquery-3.1.1.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

student_logprocess.php

    <?php
require_once('student_conn.php');
session_start();  


$fname = $_POST['txtusername']; //Retrieve AJAX data

$password = $_POST['txtpassword']; //Retrieve AJAX data

$sql=$db->prepare("SELECT * FROM lgn_student WHERE fname=:txtusername AND password=:txtpass");
$sql->bindParam(':txtusername',$fname);
$sql->bindParam(':txtpass',$password);
$sql->execute();

if( $sql->fetch() )

    $_SESSION['account']=true;
    $data['state'] = 1; 



else

    $data['state'] = 0;  



header("Content-type: application/json; charset=utf-8");
echo json_encode($data);

【问题讨论】：

代码有错别字 @Smartpal 是 function "showmsg();" 吗？我看到你是这样输入的，呵呵，但我会改变它 将 java 脚本部分移动到 标记中。 这是一个实时站点吗？我当然希望不会。 @BobbyAxe 移动了它，但还是一样。我的 java 脚本正确吗？ function showmsg() var user = 'txtusername'; var pw = 'txtpassword'; var userName = document.getElementById('username').value; var passWord = document.getElementById('password').value; if((username == userName) &amp;&amp; (pw == passWord)) swal("Good job!", "Login Success!", "success"); else swal("Oops...", "Invalid credentials!", "error"); 【参考方案1】：

您不应该/不能只检查脚本代码中的用户名/密码是否正确，因为任何人都可以访问它。 如果符合您的逻辑，您可以使用 Ajax 和 Php 来执行此操作。

    单击表单的“发送”按钮后，您的 Ajax 逻辑将捕获该操作，您可以使用该函数调用远程 php 文件来检查您的凭据，即 student_logprocess.php php 文件会返回一个答案，通常是带有消息的布尔状态。 在 Ajax 的返回函数中，处理 php 响应以显示一个甜蜜的消息并重定向到另一个页面。

我没有在这里显示代码，因为 *** 上已经回答了类似的问题，并且可以帮助您： 看看这个线程：PHP + Ajax Login

另外，如何使用 jQuery 执行 Ajax 调用：http://api.jquery.com/jquery.ajax/

希望对您有所帮助。

编辑

我评论了我在您的代码上编辑的内容，以帮助您了解它应该如何工作。我将使用 jQuery 和 Ajax 对您的 php 文件执行异步调用。

    从按钮中删除 showmsg() 函数：

    &lt;button type="submit" class="btn btn-primary btn-lg btn-block" id="submit"&gt;Login&lt;/button&gt;

    用下面这样的 Ajax 调用替换你的脚本内容，并在你的脚本之前而不是之后调用 jQuery

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script type="text/javascript">


    $(function()  //create a function that waits for the DOM to be ready

         var username = $('#user').val(),
                password = $('#pw').val(),
                smb = $('#submit');

           smb.on('click', function(e) //Capture the submit button click
              e.preventDefault(); //prevent the form to be sent when you click

              //perform an Ajax POST. More info here : https://api.jquery.com/jquery.post/
              $.post( "/path/to/your/student_logprocess.php", 
                    u: username, p: password,
                    function( data )  
                      //In case of success, data will return what you defined in your php script. That'll allow you to trigger your swal notification
                      if(data.state == 1) 
                         swal("Good job!", "Login Success!", "success");
                         //redirect here
                         window.location.href = "http://example.com/account/";
                      
                      else
                         swal("Oops...", "Invalid credentials!", "error");
                    );
              ););

      </script>

    编辑您的 PHP 脚本以反映 AJAX 调用

    <?php

session_start(); //Start session at the beginning of your script  


$fname = $_POST['u']; //Retrieve AJAX data

$password = $_POST['p']; //Retrieve AJAX data

$sql=$db->prepare("SELECT * FROM lgn_student WHERE   fname=:txtusername AND password=:txtpass");
$sql->bindParam(':txtusername',$fname);
$sql->bindParam(':txtpass',$password);
$sql->execute();

if( $sql->fetch() ) //Fetch Single Result with pdo, use php function count to see if you have found something

    $_SESSION['account']=true;
    $data['state'] = 1; 



else

    $data['state'] = 0;  



header("Content-type: application/json; charset=utf-8"); //inform the browser we're sending JSON data
echo json_encode($data); //echoing JSON encoded data as the response for the AJAX call

?>

改进

    在访问数据库之前检查您的用户数据。即使准备好的语句保护您免受对待，测试应用程序用户输入的内容也是一种很好的行为，例如空字段等。例如，如果 $fname 或 $password 为空，则可以返回 $data['state'] = 0直接跳过db请求。

    您的数据库中似乎有明确的用户密码，没有任何散列，这是一个严重的安全漏洞。为了改进您的代码，我鼓励您阅读 php 中的密码哈希，将哈希存储到您的 lng_student 密码列而不是直接输入密码：

http://php.net/manual/en/faq.passwords.php

【讨论】：

嗨！感谢您的评论！我会查看您提供的链接，非常感谢！ T.T如果我设法解决它，我会回来.. 嗨！我可以用这个替换我的标题吗？ header(echo 'swal( title: "Logged In Successfully!", text: "Redirecting you..", timer: 1000, showConfirmButton: true confirmButtonColor: "#77dd77", confirmButtonText: "Okay", , function() swal("Please Wait.", "Credentials Accepted...", "success"); window.location = "student_main.php"; );'我换成了header('location:student_main.php') 您好！你不能，我邀请你在这里阅读标题 (php.net/manual/en/function.header.php)。您是否尝试过上述解决方案？ 嗨！很抱歉回复晚了。我刚刚看到你的代码，我现在就试试！ Oki dokii，我会努力寻找它！太感谢了！ TT.TT 你救了我 ;AAA;

以上是关于PHP中的甜蜜警报的主要内容，如果未能解决你的问题，请参考以下文章

javascript [甜蜜警报]

javascript 甜蜜警报

html 甜蜜警报

html 提取甜蜜警报成功复选标记

如何在甜蜜警报中使用日期时间选择器？

如何在ajax请求完成时关闭甜蜜警报