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

时间：2015-04-18 23:15:10

标签： javascript php jquery html forms

我有一个登录表单，当点击时会运行一段javascript来调用php页面来处理输入。

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

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

有谁知道如何克服这个问题？

这是表格：

<?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：

<?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的样子

Dashboard with using javascript

它应该是这样的：

How it should look

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

2 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

您无法使用ajax重定向主页面，您需要做的是在ajax响应中返回您要转到的网址，并在成功回调中导航到该页面。
我建议在你的回复中使用json而不是简单的html，比如

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

或

{
    "success": false,
    "msg": "<h4><center><p class=text-danger>Username should be alpha numeric characters only.</p></center></h4>"
}

$.post('LoginSubmit.php', data, function(response){
   if (response.success)
       window.location = response.url;
   else
       $("#loginForm").prepend(response.msg);
}, 'json')
相关问题
最新问题