Javascript PHP中的Sweet Alert_Javascript_Php_Html_Xampp_Sweetalert

Javascript PHP中的Sweet Alert

javascript php html xampp

Javascript PHP中的Sweet Alert,javascript,php,html,xampp,sweetalert,Javascript,Php,Html,Xampp,Sweetalert,我有两个文件，一个是login.php，另一个是loginprocess.php，我想发生的是，当我单击login.php中的提交按钮时，会弹出一个SweetAlert notif，表示登录成功，然后重定向到另一个.php页面，当凭据不正确时，它会显示一个swal错误并再次返回登录登录表单：这是我的密码： login.php <!DOCTYPE html> <html> <head> <title>Login Form<

我有两个文件，一个是login.php，另一个是loginprocess.php，我想发生的是，当我单击login.php中的提交按钮时，会弹出一个SweetAlert notif，表示登录成功，然后重定向到另一个.php页面，当凭据不正确时，它会显示一个swal错误并再次返回登录

登录表单：

这是我的密码：

    <!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" width="200" alt="UserPhoto" />
        </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>


登录表单
学生登录表
请登录以继续
记得我吗
登录
函数showmsg（）
{
var user='txtusername'；
var pw='txtpassword'；
var userName=document.getElementById（'userName'）。值；
var passWord=document.getElementById（'passWord'）。值；
如果（（用户名==用户名）&&（密码==密码））{
swal（“干得好！”、“登录成功！”、“成功”）；
}
否则{
swal（“Oops…”，“无效凭证！”，“错误”）；
}
}

loginprocess.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');
}
?>

    <?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);

这里的问题是，我不能让它工作。我尝试在这里搜索，但我不理解给出的代码。。这对我来说是行不通的。。我在数据库中使用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" width="200" alt="UserPhoto" />
        </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>


登录表单
学生登录表
请登录以继续
记得我吗
登录
$（函数（）{
var username=$（'#user'）.val（），
密码=$（'#pw'）.val（），
smb=$（“#提交”）；
smb.on（'点击'）功能（e）{
e、 预防默认值（）；
$.post（“/htdocs/0205\u stud/student\u logprocess.php”，
{txtsername:username，txtspassword:password}，
函数（数据）{
var_dump（$sql->fetch（））；die（）
如果（data.state==1）{
swal（“干得好！”、“登录成功！”、“成功”）；
window.location.href=“student\u main.php”；
}
其他的
swal（“Oops…”，“无效凭证！”，“错误”）；
});
});});

student_logprocess.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');
}
?>

    <?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);

您不应该/不能只检查脚本代码中的用户名/密码是否正确，因为任何人都可以访问它。
如果符合您的逻辑，您可以将Ajax与Php一起使用
单击表单的“发送”按钮，Ajax逻辑将捕获操作，您可以使用该函数调用一个远程php文件来检查凭证，即student_logprocess.php
php文件返回一个答案，通常是一个带有消息的布尔状态
在Ajax的返回函数中，处理php响应以显示甜蜜消息并重定向到另一个页面
我没有在这里显示代码，因为类似的问题已经在StackOverflow上得到了回答，可以帮助您：
看看这条线：
另外，如何使用jQuery执行Ajax调用：
希望能有帮助

编辑
我对您的代码中编辑的内容进行了评论，以帮助您理解它应该如何工作。我将使用jQuery和Ajax对php文件执行异步调用
从按钮中删除showmsg（）函数：
登录

用下面这样的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>


$（function（）{//创建一个等待DOM就绪的函数
var username=$（'#user'）.val（），
密码=$（'#pw'）.val（），
smb=$（“#提交”）；
smb.on（'click'，函数（e）{//捕获提交按钮单击
e、 preventDefault（）；//防止在单击时发送表单
//执行Ajax帖子。更多信息请参见：https://api.jquery.com/jquery.post/
$.post（“/path/to/your/student\u logprocess.php”，
{u:username，p:password}，
函数（数据）{
//如果成功，数据将返回您在php脚本中定义的内容。这将允许您触发swal通知
如果（data.state==1）{
swal（“干得好！”、“登录成功！”、“成功”）；
//重定向到这里
window.location.href=”http://example.com/account/";
}
其他的
swal（“Oops…”，“无效凭证！”，“错误”）；
});
});});

编辑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

?>

中有输入错误code@Smartpal它是函数“showmsg（）；”
？我看到yt是这样进入的，呵呵，但我会改变它，把java脚本部分移到标记中。这是一个实时站点吗？“我当然希望不是。”博比亚克斯移动了它，但还是一样。。我的java脚本正确吗<代码>函数showmsg（）{var user='txtstername'；var pw='txtpassword'；var userName=document.getElementById（'userName'）.value；var passWord=document.getElementById（'passWord'）.value；if（（userName==userName）&&&（pw==passWord））{swal（“干得好！”，“登录成功！”，“成功”）；}else{swal（“Oops…”，“无效凭据！”，“错误”）；}}

Hii！感谢您的评论！我将查看您提供的链接，非常感谢！T.T如果我能解决问题，我会回来的..嗨！我可以替换我的标题吗