Question

所以我是AJAX的新手（不是PHP新手），我正在尝试使用AJAX创建一个登录来查询PHP文件。所以，这是我正在尝试使用的代码。

我有三个文件。第一个是login_form.php。它包含登录表单...

<html>
    <head>
        <title>Log In</title>
        <script language="javascript" src="loginsender.js" />
    </head>
    <body>
        <form method="post" name="loginfrm" onsubmit="formValidator()">
            <p id="hint"></p>
            <label for="username">Username:</label><input type="text" name="username" id="username" />
            <label for="password">Password:</label><input type="password" name="password" id="password" />
            <input type="submit" name="submit" value="Log In" />
        </form>
    </body>
</html>

下一个loginsender.js。这是我用来发送到PHP脚本的JavaScript / AJAX文件...

function formValidator()
{
    if (document.loginfrm.username.value.length < 3 || loginfrm.password.value.length < 3)
    {
        msg = "Please enter a valid username/password."
        document.getElementById("hint").innerHTML=msg;
    }
    else
    {
        if (window.XMLHttpRequest)
        {
            xmlhttp = new XMLHttpRequest();
        }
        else
        {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                document.getElementById("hint").innerHTML = xmlhttp.responseText;
            }
        }
    }

    var params = "username=" + document.loginfrm.username.value + "&password=" + document.loginfrm.password.value;
    xmlhttp.open("post", "login.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", params.length);
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.send(params);
}

最后一个是login.php，这是我用来处理实际登录的内容......

<?php
session_start();

require_once("includes/mysql.inc.php");
require_once("includes/functions.inc.php");

$username = sanitize($_POST['username'], true);
$password = sanitize($_POST['password'], true);

$query = "SELECT * FROM users WHERE username = '$username'";
$result = mysql_query($query);
if (mysql_num_rows($result) != 1) // no such user exists
{
    echo 'Sorry, no such user exists';
    logout();
    die();
}
$userData = mysql_fetch_assoc($result);
$hash = hash('sha256', $userData['salt'] . hash('sha256', $password));

if ($hash == $userData['password'] && $username == $userData['username']) // successful log in
{
    validateUser($userData['username']); // set session data
    echo '<meta http-equiv="refresh" content="2; url=index.php" />';
}
else
{
    echo 'Sorry, but you entered an incorrect username/password.';
    logout();
    die();
}

?>

总而言之，目标是让用户在login_form.php中输入他们的用户名和密码组合并提交它，触发loginsender.js（以及formValidator（）方法）。然后，它将查询PHP登录脚本，该脚本将测试有效的用户/通过组合，然后在会话中设置它（如果登录失败，则不会）。问题是，无论我输入什么组合，都没有任何反应，点击提交时页面会刷新，但就是这样。

**更新1：我已经编辑了我的login_form页面，我只是将formValidator函数放入脚本中，这样我就可以更容易地查看而不是在文档之间翻转。

我还实施了一些建议。

这是：

<html>
    <head>
        <title>Log In</title>
        <script type="text/javascript" language="javascript">
        function formValidator()
        {
            if (document.loginfrm.username.value.length < 3 || loginfrm.password.value.length < 3)
            {
                msg = "Please enter a valid username/password."
                document.getElementById("hint").innerHTML=msg;
            }
            else
            {
                if (window.XMLHttpRequest)
                {
                    xmlhttp = new XMLHttpRequest();
                }
                else
                {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }

                xmlhttp.onreadystatechange = function()
                {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    {
                        document.getElementById("hint").innerHTML = xmlhttp.responseText;
                    }
                }
            }

            var params = "username=" + document.loginfrm.username.value + "&password=" + document.loginfrm.password.value;
            xmlhttp.open("post", "login.php", true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.setRequestHeader("Content-length", params.length);
            xmlhttp.setRequestHeader("Connection", "close");
            xmlhttp.send(params);
        }
        </script>
    </head>
    <body>
        <p id="hint"></p>
        <form method="post" name="loginfrm" onsubmit="formValidator(); return false;">
            <label for="username">Username:</label><input type="text" name="username" id="username" />
            <label for="password">Password:</label><input type="password" name="password" id="password" />
            <input type="submit" name="submit" value="Log In" />
        </form>
    </body>
</html>

Answer 1

您似乎没有阻止默认的“提交”操作发生，因为您尚未为表单定义action只是POST回到当前页面。

将表单html行更改为：

<form method="post" name="loginfrm" onsubmit="formValidator(); return false;">

return false;告诉它不要做任何为该动作做的事情。

Answer 2

如果您不希望Form-submit-action刷新页面，请从onsubmit脚本返回false。否则，浏览器将完全按照您在<form>中告诉他的方式执行：HTTP POST。

Answer 3

我认为OnSubmit（）函数已执行，并且表单确实已提交！所以你得到一个空白页面，这是PHP脚本的输出。

不要把它变成html格式，它应该可以正常工作。

Answer 4

您需要编写此代码以防止表单刷新..

<form method="post" name="loginfrm" onsubmit="formValidator(); return false;">

除此之外，您的代码还可以。

Answer 5

试试这个

<input type="submit" name="submit" value="Log In" onclick="formValidator(); return false;"/>

如何使这个AJAX / PHP工作？

5 个答案: