AJax / PHP登录表单-Mysql数据库[Jquery Mobile]

Question

我在提交AJAX / PHP表单时遇到问题。

我的ajax如下：

<script type="text/javascript">
        $('#loginForm').submit(function() {
           checkLogin();
        });

        function checkLogin()
        {
             $.ajax({
                url: "login.php",
                type: "POST",
                data: {
                    username: $("#username").val(),
                    password: $("#password").val()
                },
                success: function(response)
                {
                    if(response == 'true')
                    {
                        window.location.replace("main.html");
                    }
                    else
                    {
                        $("#errorMessage").html(response);
                    }
                }
            });
        }
        </script>

我的表格：

<form id="loginForm" data-ajax="false">
    <label id="errorMessage"></label>
    <div data-role="fieldcontain">
        <label for="username">Username:</label>
        <input id="username" type="text" placeholder="Username" />
    </div><!-- End Contained Fields -->
    <div data-role="fieldcontain">
        <label for="password">Password:</label>
        <input id="password" type="password" placeholder="Password" />
    </div><!-- End Contained Fields -->
    <div data-role="fieldcontain">
        <input type="submit" id="login" value="Login" />
    </div><!-- End Contained Fields -->
    </form><!-- End Form -->

然后我的login.php脚本：

    <?php

$username = mysql_real_escape_string($_POST['username']);
$password = md5(mysql_real_escape_string($_POST['password']));

if(!empty($username) && !empty($password))
{
    $db = new PDO('mysql:host=localhost;dbname=mobile;charset=utf8', 'root', 'password');
    try {
        $stmt = $db->query("SELECT COUNT(*) FROM users WHERE username='$username' and password='$password'");
        if(intval($stmt->fetchColumn()) === 1)
        {
            echo 'true';
        }
        else
        {
            echo 'false';
        }
    } catch(PDOException $ex) {
        echo "An error has occured!";
    }
}

?>

我最初仅使用原始php对整个JQuery Mobile应用程序进行了编程，但最近发现我必须使用AJAX和Html才能使用PhoneGap将其移植到IOS和Android。

我对使用Ajax相当陌生，并且在这里阅读了尽可能多的文章，以尝试使其工作。 不确定我是否遇到语法问题或只是没有正确处理它。

我的本地计算机正在加载mysql服务器（数据库名称为mobile，我尝试加载的表为users）。 我知道这部分都是正确的，因为它可以与php正常工作。

有人可以解释我的问题吗？ 谢谢。

Answer 1

问题是这一行：

 window.location.replace('main.html'); 

更改为：

 window.location.href='main.html';

Answer 2

这个：

$("$errorMessage").html("Attempting to login...");

应该：

$("#errorMessage").html("Attempting to login...");

或者，如果您之前已经定义了$ errorMessage变量，如下所示：

var $errorMessage = $("#errorMessage");

它应该是 ：

$errorMessage.html("Attempting to login...");

编辑：

PHP手册 ：“对于大多数数据库，PDOStatement :: rowCount（）不会返回受SELECT语句影响的行数.....”

你可以试试：

....
$stmt = $db->query("SELECT COUNT(*) FROM users WHERE username='$username' and password='$password'");
if (intval($stmt->fetchColumn()) === 1) {   //make sure it's not a string 
  echo 'true';
    $_SESSION['username'] = $username;
   // OR perform another SELECT query to retrieve the data 
}
else
{
    echo 'false';
}
.....