表单提交跳过/忽略AJAX功能

时间:2018-12-11 16:12:17

标签: php jquery ajax

我是php的新手,我想通过AJAX将表单提交给func_login.php,而不是使用action =“ func_login.php”。因此,当用户无法登录时,我可以在同一页面上处理错误。

但是AJAX不起作用,表单提交跳过/忽略AJAX并直接转到func_login php页面。我不知道如何检查/调试AJAX中的错误。我的代码有什么问题?

header.php

<form method="post" id="sign-in-form" action="func_login.php" enctype="multipart/form-data">
<div class="form-group">
    <label for="mailInput">Email address</label>
    <input type="email" class="form-control" id="mailInput2" aria-describedby="emailHelp" placeholder="Enter email" name="email">
</div>
<div class="form-group">
    <label for="passInput">Password</label>
    <input type="password" class="form-control" id="passInput2" placeholder="Password" name="password">
</div>
<button type="submit" class="border-0 bg-yellow btn-normal col mt-3" name="submit_login">Login</button>
</form>

func_login.php

<?php 
 if($_SERVER["REQUEST_METHOD"] == "POST") {
  $myemail = mysqli_real_escape_string($connection, $_POST['email']);
  $mypassword = mysqli_real_escape_string($connection, $_POST['password']); 

  $sql = "SELECT * FROM users WHERE email = '".$myemail."'";
  $result = mysqli_query($connection, $sql);
  $count = mysqli_num_rows($result);

  if($count == 1) {
     $row = mysqli_fetch_array($result,MYSQLI_ASSOC);
     $salt = $row["salt"];
     $db_encrypted_password = $row["password"];

     if(password_verify($mypassword.$salt,$db_encrypted_password)){
        echo "valid";
     }else{
        echo "invalid";
     }
  }
}
?>

js.php

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" integrity="sha384-GqVMZRt5Gn7tB9D9q7ONtcp4gtHIUEW/yG7h98J7IpE3kpi+srfFyyB/04OV6pG0" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.0/js/bootstrapValidator.min.js"></script>
<script>
//...Some BootstrapValidotor Code

$('#sign-in-form').on('submit',function(e){
    e.preventDefault();
    $.ajax({
        url: '/func_login.php',
        data: {
            myemail=$("#mailInput2").val(),
            mypassword=$("#passInput2").val();
        },
        dataType: 'json',
        type: 'POST',
        success: function(data) {
           header("location: welcome.php");
           alert("true");
        },
        error: function(data) {
           alert("false");
           //HANDLE ERROR HERE (POP OUT SOME ERROR DIALOG AND STAY ON SAME PAGE)
        }
     });
});

</script>

1 个答案:

答案 0 :(得分:0)

PHP标头在jquery中不起作用 试试这个

$('#sign-in-form').on('submit',function(e){
    e.preventDefault();
var redireectUrl = 'welcome.php';
    $.ajax({
        url: 'func_login.php',
        data: {
            myemail=$("#mailInput2").val(),
            mypassword=$("#passInput2").val();
        },
        dataType: 'json',
        type: 'POST',
        success: function(data) {
           window.location.href = redireectUrl;

           alert("true");
        },
        error: function(data) {
           alert("false");
           //HANDLE ERROR HERE (POP OUT SOME ERROR DIALOG AND STAY ON SAME PAGE)
        }
     });
});