Javascript 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>

---

我想你忘了启动会话。因此，在脚本顶部启动会话。希望这会有帮助

 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'];
        }

    }

---

你可以尝试三件事：

在试图设置会话变量的页面上，必须使用适当的php开头标记，如

，才能使其工作

---

祝你好运

既然你说你对Ajax很陌生，那么你一开始就很好。 然而，有几件事需要知道它是如何工作的

您希望避免页面刷新，但不打印任何响应，因为在ajax请求中没有返回任何内容。而是设置一个

会话

变量，该变量将在下一页请求时显示（因此刷新）

对于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更新页面，以使其正常工作。

我能够以我希望的方式使其正常工作

表格：

登录
用户名
密码

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>

$（文档）.ready（函数（）{
$（'#login'）。单击（函数（）
{
var username=$（“#username”）.val（）；
var password=$（“#password”）.val（）；
var dataString='username='+username+'&password='+password；
如果（$.trim（用户名）.length>0&&$.trim（密码）.length>0）
{
$.ajax({
类型：“POST”，
url:“ajax/login.php”，
数据：dataString，
cache:false，
beforeSend:function（）{$（“#login”）.val（'Connecting…'）；}，
成功：功能（数据）{
如果（数据）
{
setTimeout（函数（）{
location.href=“index.php”；
}, 3000);
}
其他的
{
$（“#框”）.shake（）；
$（“#login”）.val（'login'）
$（“#error”）.html（“错误：无效的用户名和密码。”）；
}
}
});
}
返回false；
});
});

PHP（ajax/login.PHP）：

---

你开始一个会话了吗？我一直不想问这个问题，但是会话已经开始了吗？10次中有9.9次，他们说“是”，但不发布代码。您的所有php入口点（用户可以导航到的页面）中是否都有
session\u start（）
。此外，不应将用户数据直接添加到查询中。使用预先准备好的/参数化的查询。我讨厌人们说“我没走那么远…”或“这个网站不会公开…”或“它只供学校使用，所以安全不重要…”。如果老师和教授从一开始就不谈论安全问题，那他们就是做错了。他们正在教授草率而危险的编码实践，学生们以后将不得不放弃这些实践。我也讨厌人们说，“我以后再加安全措施……”。如果你第一次没有时间做正确的事情，你什么时候才能找到时间来添加它呢？事实上，与下面的答案一致，会话变量是由您调用的PHP设置的……您只是在当前页面中看不到它，因为在AJAX成功看到会话变量后，您必须重新加载当前页面。嗯。。。。。。。。。。。看看OP所说的评论太快了，牛仔。只要写我键入的代码。删除if（session_status（）==PHP_session_NONE）{session_start（）；}和tryUh…..为什么？索引应始终为小写？因为它在查询中是“Name”，所以在返回中应该是“Name”。否则，您的功能将失败。您也不会对查询进行任何错误检查。是的。。。更新了该行的注释，意思是说数据库列、数组索引等。。应该是小写的。例如，与Windows相比，在Linux系统上运行完全相同的代码（区分大小写）可能会破坏它。Hmmmm，这是我多年编程中从未听说过的智慧结晶。快速搜索互联网也不会发现那个些小新闻。只是说。谢谢你的好话，我甚至不记得我什么时候拿起它的，但是为了让大家更容易，这里有一些关于这个主题的信息，而不是我刚才所说的金块。我很肯定速记法可以胜任这项工作。2.我已经在我的$会话中放置了一个变量？这就是第三点。每个页面上都已经有人在调用会话。很好！我只是在写我的答案，但既然你想出了一些可行的办法，我就放弃它，继续前进！你自己解决它，并且费心把你的解决方案作为一个答案来传递，这是值得一投的。有几件事让我大吃一惊！稍微合理的代码缩进将使代码更易于阅读，更重要的是调试。更重要的是，只有在数据库中找到Uid/Pwd时，才将回复传递回javascript。最好将成功和失败的回复都传回给JS，这样JS就可以采取行动了accordingly@RiggsFolly它已经这样做了，如果输入的数据是无效信息，它会“摇晃”表单
$.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.
    }
});

    $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.
        }
    }

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

<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
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'];
}

}
?>