ajax登录脚本的问题

时间:2016-01-14 21:52:55

标签: javascript php jquery ajax

我是ajax的新手,我正在尝试创建一个不需要页面重新加载的登录脚本 - 除了我尝试在处理页面上设置会话变量但没有会话变量之外它运行良好已经确定了。

我的表格:

<div class="form-bottom">
    <form role="form" class="login-form">
        <div class="form-group">
            <label class="sr-only" for="username">Username</label>
        <input type="text" name="username" placeholder="Username..." class="form-username form-control" id="username">
        </div>
        <div class="form-group">
        <label class="sr-only" for="password">Password</label>
        <input type="password" name="password" placeholder="Password..." class="form-password form-control" id="password">
        </div>
        <input type="submit" id="submit" class="btn" style="width:100%;background-color:lightblue;" value="Log In" id="login"/>
    </form>
        <? echo $_SESSION['Name']; ?>
</div>

我的阿贾克斯:

<script type="text/javascript" >
      $(function() {
          $("#submit").click(function() {
          var username = $("#username").val();
          var password = $("#password").val();
          var dataString = 'username='+ username + '&password=' + password;

        if(username=='' || password=='')
        {
          $('.success').fadeOut(200).hide();
          $('.error').fadeOut(200).show();
        }
        else
        {
          $.ajax({
            type: "POST",
            url: "ajax/login.php",
            data: dataString,
            success: function(){
             $('.success').fadeIn(200).show();
             $('.error').fadeOut(200).hide();
             window.setTimeout(function () {
                location.href = "index.php";
            }, 3000);
            }
          });
        }
        return false;
        });
    });
    </script>

我的php脚本:

 include('./static/config.php');

if (session_status() == PHP_SESSION_NONE) {
        session_start();
    }

if(isset($_POST)) {

    $username = mysqli_real_escape_string($con, $_POST['username']);
    $password = mysqli_real_escape_string($con, $_POST['password']);

    $sql = "SELECT Name FROM techs WHERE Username='$username' AND Password='$password'";
    $result = mysqli_query($con, $sql);
    $exists = mysqli_num_rows($result);

    if($exists == 1) {
    $row = mysqli_fetch_assoc($result);
        $_SESSION['Name'] = $row['Name'];
    }

}

4 个答案:

答案 0 :(得分:2)

我能够按照我想要的方式工作。

形式:

<div id="box">
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3 form-box">
                    <div class="form-top">
                        <div class="form-top-left">
                            <h3>Log-in</h3>
                            <span id="error" class="error"></span>
                        </div>
                        <div class="form-top-right">
                            <i class="fa fa-key"></i>
                        </div>
                    </div>
                    <div id="box" class="form-bottom">
                        <form class="login-form" action="" method="post">
                            <div class="form-group">
                                <label class="sr-only" for="username">Username</label>
                                <input type="text" name="username" placeholder="Username..." class="form-username form-control" id="username">
                            </div>
                            <div class="form-group">
                                <label class="sr-only" for="password">Password</label>
                                <input type="password" name="password" placeholder="Password..." class="form-password form-control" id="password">
                            </div>
                            <input type="submit" id="login" class="btn" style="width:100%;background-color:lightblue;" value="Log In" id="login"/>
                        </form>
                    </div>
                </div>
            </div>
        </div>

AJAX代码:

<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.shake.js"></script>
        <script>
            $(document).ready(function() {

            $('#login').click(function()
            {
            var username=$("#username").val();
            var password=$("#password").val();
            var dataString = 'username='+username+'&password='+password;
            if($.trim(username).length>0 && $.trim(password).length>0)
            {


            $.ajax({
            type: "POST",
            url: "ajax/login.php",
            data: dataString,
            cache: false,
            beforeSend: function(){ $("#login").val('Connecting...');},
            success: function(data){
            if(data)
            {
            window.setTimeout(function () {
                location.href = "index.php";
            }, 3000);
            }
            else
            {
             $('#box').shake();
             $("#login").val('Login')
             $("#error").html("<span style='color:#cc0000'>Error:</span> Invalid username and password. ");
            }
            }
            });

            }
            return false;
            });


            });
        </script>

PHP(ajax / login.php):

<?php
include("../static/config.php");
session_start();
if(isSet($_POST['username']) && isSet($_POST['password']))
{
// username and password sent from Form
$username=mysqli_real_escape_string($con,$_POST['username']); 
$password=mysqli_real_escape_string($con,$_POST['password']); 

$result=mysqli_query($con,"SELECT Name FROM techs WHERE Username='$username' and Password='$password'");
$count=mysqli_num_rows($result);

$row=mysqli_fetch_array($result,MYSQLI_ASSOC);
// If result matched $myusername and $mypassword, table row must be 1 row
if($count==1)
{
$_SESSION['Name']=$row['Name'];
echo $row['Name'];
}

}
?>

答案 1 :(得分:1)

既然你已经说过你对Ajax很陌生,那你就开始了。 然而,有一些事情要知道它是如何工作的。

您希望避免刷新页面,但是您不打印任何回复,因为您未在ajax请求中返回任何内容。您改为设置session变量,该变量将显示在下一页请求中(因此刷新)

$.ajax({ 
    type: 'POST', 
    url: 'ajax/login.php', 
    data: { username:  $("#username").val(), password:  $("#password").val() }, 
    success: function (data) { 
        $('.form-bottom').html(data); // here we replace the form with output of the ajax/login.php response.
    }
});

对于PHP方面的事情:

    $sql = "SELECT Name FROM techs WHERE Username='$username' AND Password='$password'";
    if(($result = mysqli_query($con, $sql)) != false){ // always verify if your query ran successfully.
        if(mysqli_num_rows($result)){ // or compare with == 1, but assuming a username is unique it can only be 1 so it equals to true.
            echo mysqli_fetch_assoc($result)['name']; // index, columns, etc should always be lower cased to avoid confusion.
            // Obviously you can store it in a session
            // But for now just output the data so we can use it as our response.
            // json is very usefull with sending large amounts of data.
        }
    }

Ajax的想法是你可以请求更新,但你需要手动用javascript更新你的页面才能使它工作。

答案 2 :(得分:0)

我认为您忘记启动会话。因此,请在脚本顶部启动会话。希望它会有所帮助。

 session_start();

    include('./static/config.php');

    if(isset($_POST)) {


        $username = mysqli_real_escape_string($con, $_POST['username']);
        $password = mysqli_real_escape_string($con, $_POST['password']);

        $sql = "SELECT Name FROM techs WHERE Username='$username' AND Password='$password'";
        $result = mysqli_query($con, $sql);
        $exists = mysqli_num_rows($result);

        if($exists == 1) {
        $row = mysqli_fetch_assoc($result);
            $_SESSION['Name'] = $row['Name'];
        }

    }

答案 3 :(得分:0)

你可以试试3件事:

  1. 在您尝试设置会话变量的页面上,您必须使用正确的php开头标记,例如<?php
  2. 第二件事是你必须在你的会话中加上一个值$_SESSION['hello'] = 'hello';
  3. 第三件事,在您处理会话的每个页面上,您都必须致电<?php session_start(); ?>才能使其正常工作。
  4. 古德勒克!