使用javascript和php重定向用户时出现的问题

使用javascript和php重定向用户时出现的问题,javascript,php,jquery,html,forms,Javascript,Php,Jquery,Html,Forms,我有一个登录表单,单击它时运行一段javascript来调用php页面来处理输入 我在如何根据用户角色类型显示重定向方面遇到了问题。它尝试在原始登录表单中显示此信息 使用javascript背后的原因纯粹是因为我希望能够在同一页上显示用户错误,而无需导航到另一页——这很好。但成功提交后,登录页面应将用户引导至正确的仪表板。如果我使用标准的方法和操作方法发布到表单,它可以正常工作,但是我的错误将显示在新页面上,这是我不想要的 有人知道我如何克服这个问题吗 表格如下: <?php /***

我有一个登录表单,单击它时运行一段javascript来调用php页面来处理输入

我在如何根据用户角色类型显示重定向方面遇到了问题。它尝试在原始登录表单中显示此信息

使用javascript背后的原因纯粹是因为我希望能够在同一页上显示用户错误,而无需导航到另一页——这很好。但成功提交后,登录页面应将用户引导至正确的仪表板。如果我使用标准的方法和操作方法发布到表单,它可以正常工作,但是我的错误将显示在新页面上,这是我不想要的

有人知道我如何克服这个问题吗

表格如下:

<?php


/*** begin  session ***/
session_start();

/*** set a form token ***/
$form_token = uniqid();

/*** set the session form token ***/
$_SESSION['user_token'] = $form_token;
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Insights Login</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src='js/index.js'></script>
  <script>

      function loginCall() {
      $(".text-danger").remove(); 
  $(".text-success").remove();
  var data = $('#loginForm').serialize();
  $.post('LoginSubmit.php', data, function(response){

     $("#loginForm").prepend(response);

  }).fail(function(jqXHR, textStatus) {
    alert( "Request failed: " + textStatus );
  });
}
  </script>

</head>
<body>
    <div class="container">
    <div class="row">

        <div class="col-md-6 col-md-offset-3">
  <h1 style="border-bottom: 1px solid #c5c5c5;">

    Insights Login
  </h1>
  <div style="padding: 20px;">
  <form id = "loginForm" class="loginForm">
      <fieldset>
        <div class="form-group input-group">
          <span class="input-group-addon">
            <i class="glyphicon glyphicon-user">
    </i>
          </span>
          <input class="form-control" placeholder="Username" name="username" type="username" id="username" autofocus="">
        </div>
        <div class="form-group input-group">
          <span class="input-group-addon">
            <i class="glyphicon glyphicon-lock">
            </i>
          </span>
          <input class="form-control" placeholder="Password" name="password" type="password" id="password" value="">
        </div>
        <input type="hidden" name="user_token" value="<?php echo  $_SESSION['user_token'];  ?>"/>
        <div class="form-group">
          <button type="button" class="btn btn-block btn-success" class="pull-right" onclick="loginCall();">Login</button>
          <div class="col-xs-6 col-sm-6 col-md-6">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" value="Remember">
                                    Remember me
                                </label>
                            </div>
                        </div>
          <p class="help-block">
            <a class="pull-right text-muted" href="ForgottenPassword.php"><small>Forgot your password?</small></a>
          </p>
        </div>
      </fieldset>
    </form>
  </div>
</body>

</html>
<?php

session_start();

/*** check that both the username, password have been submitted ***/
if (empty($_POST['username'])) 
{
    echo '<h4><center><p class=text-danger>Username cannot be left empty</p></center></h4>';
} 
elseif (empty($_POST['password'])) 
{
    echo '<h4><center><p class=text-danger>Password cannot be left empty</p></center></h4>';
}

else {

    $username = $_POST['username'];
    $password = $_POST['password'];

    if (!ctype_alnum($username)) {

        echo '<h4><center><p class=text-danger>Username should be alpha numeric characters only.</p></center></h4>';
    }

    elseif (strlen($username) < 5 || strlen($username) > 50) {
        echo '<h4><center><p class=text-danger>>username should be within 5-50 characters long.</p></center></h4>';
    }

    elseif (strlen($password) < 3 || strlen($password) > 40) {
        echo '<h4><center><p class=text-danger>Password should be within 3-40 characters long.</p></center></h4>';
    }

    else { 

        include "includes/db_conx.php";

        try
        {
          $db_conx = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password);

          $db_conx->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

          $sql = $db_conx->prepare("SELECT username, password, user_record_id FROM login_details
            WHERE username = :username AND password = :password");

          /*** now we can encrypt the password ***/
          $password = sha1( $password );

          /*** bind the parameters ***/
          $sql->bindParam(':username', $username, PDO::PARAM_STR);
          $sql->bindParam(':password', $password, PDO::PARAM_STR, 40);
          $sql->execute();

          /*** check for a result ***/
          $user_record_id = $sql->fetchColumn(2);

          if(! $user_record_id)
          {
            echo "<p class='text-danger'>Login Failed - Credentials not recognised. Please try again</p>";
        }

        else {

          $sql2=$db_conx->prepare("SELECT role_type_code FROM user where user_record_id = :user_record_id");

          $sql2->bindParam(':user_record_id', $user_record_id, PDO::PARAM_STR);
          $sql2->execute();
          $user_role_code = $sql2->fetchColumn();

          //echo $user_role_code;

            /*** set the session user_id variable ***/
            $_SESSION['username'] = $username;

                // echo $user_record_id;
            switch( $user_role_code)
            {

               case 1:
               echo "Wrong Username or Password";

               case 2:
               header("location:Admin/AdminDashboard.php");
               break;

               case 3:
               header("location:Supervisor/SupervisorDashboard.php");
               break;

               case 4:
               header("location:Student/StudentDashboard.php");
               break;

               default:
               echo "Login credentials not recognised. Please try again";
           }
       }


   }
   catch(Exception $e)
   {
    /*** if we are here, something has gone wrong with the database ***/
     echo 'Message: ' .$e->getMessage();
}
}
}


die();

?>
这是处理表单的php:

<?php


/*** begin  session ***/
session_start();

/*** set a form token ***/
$form_token = uniqid();

/*** set the session form token ***/
$_SESSION['user_token'] = $form_token;
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Insights Login</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src='js/index.js'></script>
  <script>

      function loginCall() {
      $(".text-danger").remove(); 
  $(".text-success").remove();
  var data = $('#loginForm').serialize();
  $.post('LoginSubmit.php', data, function(response){

     $("#loginForm").prepend(response);

  }).fail(function(jqXHR, textStatus) {
    alert( "Request failed: " + textStatus );
  });
}
  </script>

</head>
<body>
    <div class="container">
    <div class="row">

        <div class="col-md-6 col-md-offset-3">
  <h1 style="border-bottom: 1px solid #c5c5c5;">

    Insights Login
  </h1>
  <div style="padding: 20px;">
  <form id = "loginForm" class="loginForm">
      <fieldset>
        <div class="form-group input-group">
          <span class="input-group-addon">
            <i class="glyphicon glyphicon-user">
    </i>
          </span>
          <input class="form-control" placeholder="Username" name="username" type="username" id="username" autofocus="">
        </div>
        <div class="form-group input-group">
          <span class="input-group-addon">
            <i class="glyphicon glyphicon-lock">
            </i>
          </span>
          <input class="form-control" placeholder="Password" name="password" type="password" id="password" value="">
        </div>
        <input type="hidden" name="user_token" value="<?php echo  $_SESSION['user_token'];  ?>"/>
        <div class="form-group">
          <button type="button" class="btn btn-block btn-success" class="pull-right" onclick="loginCall();">Login</button>
          <div class="col-xs-6 col-sm-6 col-md-6">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" value="Remember">
                                    Remember me
                                </label>
                            </div>
                        </div>
          <p class="help-block">
            <a class="pull-right text-muted" href="ForgottenPassword.php"><small>Forgot your password?</small></a>
          </p>
        </div>
      </fieldset>
    </form>
  </div>
</body>

</html>
<?php

session_start();

/*** check that both the username, password have been submitted ***/
if (empty($_POST['username'])) 
{
    echo '<h4><center><p class=text-danger>Username cannot be left empty</p></center></h4>';
} 
elseif (empty($_POST['password'])) 
{
    echo '<h4><center><p class=text-danger>Password cannot be left empty</p></center></h4>';
}

else {

    $username = $_POST['username'];
    $password = $_POST['password'];

    if (!ctype_alnum($username)) {

        echo '<h4><center><p class=text-danger>Username should be alpha numeric characters only.</p></center></h4>';
    }

    elseif (strlen($username) < 5 || strlen($username) > 50) {
        echo '<h4><center><p class=text-danger>>username should be within 5-50 characters long.</p></center></h4>';
    }

    elseif (strlen($password) < 3 || strlen($password) > 40) {
        echo '<h4><center><p class=text-danger>Password should be within 3-40 characters long.</p></center></h4>';
    }

    else { 

        include "includes/db_conx.php";

        try
        {
          $db_conx = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password);

          $db_conx->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

          $sql = $db_conx->prepare("SELECT username, password, user_record_id FROM login_details
            WHERE username = :username AND password = :password");

          /*** now we can encrypt the password ***/
          $password = sha1( $password );

          /*** bind the parameters ***/
          $sql->bindParam(':username', $username, PDO::PARAM_STR);
          $sql->bindParam(':password', $password, PDO::PARAM_STR, 40);
          $sql->execute();

          /*** check for a result ***/
          $user_record_id = $sql->fetchColumn(2);

          if(! $user_record_id)
          {
            echo "<p class='text-danger'>Login Failed - Credentials not recognised. Please try again</p>";
        }

        else {

          $sql2=$db_conx->prepare("SELECT role_type_code FROM user where user_record_id = :user_record_id");

          $sql2->bindParam(':user_record_id', $user_record_id, PDO::PARAM_STR);
          $sql2->execute();
          $user_role_code = $sql2->fetchColumn();

          //echo $user_role_code;

            /*** set the session user_id variable ***/
            $_SESSION['username'] = $username;

                // echo $user_record_id;
            switch( $user_role_code)
            {

               case 1:
               echo "Wrong Username or Password";

               case 2:
               header("location:Admin/AdminDashboard.php");
               break;

               case 3:
               header("location:Supervisor/SupervisorDashboard.php");
               break;

               case 4:
               header("location:Student/StudentDashboard.php");
               break;

               default:
               echo "Login credentials not recognised. Please try again";
           }
       }


   }
   catch(Exception $e)
   {
    /*** if we are here, something has gone wrong with the database ***/
     echo 'Message: ' .$e->getMessage();
}
}
}


die();

?>
这就是在成功提交时使用js的情况

当它看起来像这样时:


任何帮助都将不胜感激。谢谢

我打赌有一些错误正在发生,你只是看不到,因为没有设置显示它们。如果javascript版本有效,那么在您的案例调用中,使用javascript重定向它们,而不是使用header方法。

您不能使用ajax重定向主页面,您需要做的是在ajax响应中返回要转到的url,并在成功回调中导航到该页面。 我建议在响应中使用json而不是纯html,比如

{
    "success": true,
    "url": "page-to-navigate-to.php"
}


如果我只是问你的问题……你是在问如何用JavaScript重定向吗?@charlietfl url结构显示在php处理页面的开关盒块中。@steven是的,我想是的。我想知道如何根据用户的角色类型将其重定向到开关块中指定的页面。谢谢你的建议,我该如何在开关盒上使用它呢?因为用户访问的url取决于他们的角色类型,所以使用数组$response=[];,然后用$response['msg']='someerror'代替echo或header;或$response['url']='url';最后的echo json_encode$response;