javascript - $.post 似乎不起作用

Question

在 jQuery 中显示了几个 alert() 调用，但是 $.post 中的 alert 确实似乎没有回应。我已经测试了 PHP 代码并且工作正常。我认为这是我的路径，但我之前已经检查过了。

<form id="login-form" method="post" class="form-inline" target="_top">
    <input type="text" tabindex="2"  id="username" placeholder="Username" name="email" class="inputtext">
    <input type="password" tabindex="3" id="userpass" placeholder="Password" name="pass" class="inputtext">
    <button tabindex="4" id="loginButton">Login</button>
</form>

$(document).ready(function(e) {
    $('#loginButton').click(function(e) {
        alert("start function");
        $.post('../php/login.php', {
            'username': $('#username').val(),
            'userpass': $('#userpass').val()
        }, function(data){
            alert(data);
        });
        alert("end function");
    });
});

<?php    
    require('config.php');

    $queryStmt = 'SELECT user_first, user_last FROM users WHERE user_name=:sqlIdName AND user_password=:sqlPass';
    $queryPrepare = $dba_connect->prepare($queryStmt);
    $queryPrepare->execute(array(':sqlIdName'=>$_POST['username'],':sqlPass'=>md5($_POST['userpass'])));
    $queryResult = $queryPrepare->fetch(PDO::FETCH_ASSOC);
    $queryPrepare->closeCursor();

    var_dump($queryResult);

    if ($queryResult == false)
        return false;
    else 
        return true;  
?>

我的文件结构是这样的:

Answer 1

button 实际上是在正常提交表单，因为您没有给它 type="button" 属性，也没有使用 preventDefault() 在点击事件本身。

无论如何，更好的做法是挂接到 form 的 submit 事件，而不是按钮的 click。试试这个:

$('#login-form').submit(function(e){
    e.preventDefault(); // stop standard form submission
    $.post('../php/login.php', {
        'username': $('#username').val(),
        'userpass': $('#userpass').val()
    }, function(data){
        console.log(data);
    });
});

您可能还想从 PHP 代码中返回 bool 值以外的其他内容，因为它只会被转换为单个字符串响应。 JSON 似乎最适合您的情况，请查看 json_encode 函数。

最后，请注意您应该始终使用 console.log 进行调试，因为它不会强制转换数据类型。