AJAX结果不等待查询完成

时间:2017-04-06 18:33:20

标签: php jquery mysql ajax

所以基本上我有这个弹出窗体,在提交按钮上有一个preventDefault,以防止它最初提交。我使用jQuery将输入发送到AJAX函数,并希望根据该AJAX函数的结果向用户显示消息。

但是,我从AJAX函数获得的数据总是相同的。这几乎就像它跳过查询并回显它的第一个结果。

这是代码。

HTML

<form class="form" method="post" action="login.php" id="login-nav">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <input type="email" class="form-control" name="login_email" id="login_email" placeholder="Email" required>
  </div>
  <div class="form-group">
    <label class="sr-only">Password</label>
    <input type="password" class="form-control" name="login_password" id="login_password" placeholder="Password" required>
  </div>
  <div class="form-group">
    <input type="submit" class="btn btn-primary btn-block" id="login_btn" value="Log In"></input>
  </div>
  <span id="login_msg"></span>
</form>

JS

$(function() {
  $("#login-nav").find("input[type='submit']").click(function(event) {
    $('#login_msg').html("<img src='../img/default.gif'>")
    event.preventDefault();
    event.stopPropagation();
    loginSubmit_OnClick();
    });
});

function loginSubmit_OnClick() {
  var email = $('#login_email').val();
  var password = $('#login_password').val();
  $.ajax({
    url: "login.php",
    type: 'POST',
    data: {email: email, password: password},
    success: function(result){
          if (result == "success") {
            $('#login_msg').html("<div class='alert alert-success' role='alert'>Logged in.</div>");
          }
          if (result == "failed") {
            $('#login_msg').html("<div class='alert alert-danger' role='alert'>Wrong password!</div>");
          }
        }
    })
};

PHP

<?php
include('connect.php');

$success = false;
$email = $_POST['login_email'];

$stmt = $db->prepare(...);

$stmt->execute();

$result = $stmt->fetch(PDO::FETCH_NUM);
$user_id = $result[0];
$email = $result[1];
$password = $result[2];

if ($result) {
  if (password_verify($_POST['login_password'], $password)) {
    $success = true;
  }
}

if ($success) {
  echo "success";
}
else {
  echo "failed";
}
?>

它总是返回“失败”并显示消息“密码错误!”即使我100%确定它应该返回成功(在没有AJAX的情况下测试它确定)。

2 个答案:

答案 0 :(得分:0)

您确定您的AJAX请求参数有正确的密钥吗?看起来他们可能会有所不同。

尝试使用:

$.ajax({
    ...
    data: $('#login-nav').serialize(),
    ...
};

而不是

$.ajax({
    ...
    data: {email: email, password: password},
    ...
};

答案 1 :(得分:0)

在ajax中你发布了data: {email: email, password: password},,但是在php中你期望$_POST['login_email']$_POST['login_password']。如果您执行var_dump($_POST);,则应包含电子邮件密码,而不是 login_email login_password

您也可以使用Ghiyas答案(https://stackoverflow.com/a/43263398/7081773)。它将模拟发送帖子,就像javascript没有阻止默认行为一样。因此,它会按照预期在帖子中发送您的输入。