时间戳

首页 > 解决方案 > 引导模式的 Ajax 调用不起作用

javascript - 引导模式的 Ajax 调用不起作用

问题描述

我正在尝试对 Bootstrap 登录模式进行简单的 Ajax 调用。登录 Modal 的主要 HTML 代码如下所示：

<form method="post" id="loginForm">
     <div id="loginMessage"></div>
     <div class="modal-footer">
       <button type="button" class="btn btn-success mr-auto"  data-target="#signupModal" data-toggle="modal" data-dismiss="modal">Register</button>
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
       <input class="btn" name="login" type="submit" id="inputButton" value="Login">                        
     </div>
 </form>

如果模态的整个 HTML 代码有帮助：https ://jsfiddle.net/aslah/hykxLqd5/2/

jQuery 代码如下所示：

$('#loginForm').submit(function(event){
    //prevent default php processing
    event.preventDefault();
    //collect user inputs:
    var datatopost = $(this).serializeArray();
    //send the user data to login.php using AJAX
    $.ajax({
        url: "login.php",
        type : "POST",
        data : datatopost,
        success : function(data){
            if(data == 'success'){
                window.location = "mainpage.php";
            }else{
                $('#loginMessage').html(data);
            }
        },
        error : function(){
            $('#loginMessage').html('<div class="alert alert-danger">There was an error with the AJAX call. Please, try again later!</div>');
        }
    }); 
});

这是我的 login.php 代码：

<?php
   
//starting the session
session_start();
//connecting to database
include('connection.php');
//check user inputs
// DEFINE ERROR MESSAGES //
$missingEmail = '<p><strong>Please enter your email address!</strong></p>';
$missingPassword = '<p><strong>Please enter a password!</strong></p>';

// $email = $_POST["loginEmail"]
// $password = $_POST["loginPassword"]

if(empty($_POST["loginEmail"])){
    $error .= $missingEmail;
}else{
    $email = filter_var($_POST["loginEmail"], FILTER_SANITIZE_EMAIL);
}
if(empty($_POST["loginPassword"])){
    $error .= $missingPassword;
}else{
    $password = filter_var($_POST["loginPassword"], FILTER_SANITIZE_STRING);
}

//If there are any ERRORS
if($error){
    $resultMessage = '<div class="alert alert-danger">'. $error .'</div>' ;
    echo $resultMessage ;
}else{
    $email = mysqli_real_escape_string($link, $email);
    $password = mysqli_real_escape_string($link, $password);
    // $password = md5($password); no secure
    $password = hash('sha256', $password); 


    //check if the user is registered by matching EMAIL & PASSWORD
    $sql = "SELECT * FROM users WHERE email = '$email' AND password = '$password' AND activation='activated' ";
    $result = mysqli_query($link, $sql);

    //if any errors while running the query
    if(!$result){
        echo '<div class="alert alert-danger"> Error running the query!</div>';
        exit;
    }

    //if login failed print ERROR
    $count = mysqli_num_rows($result);
    if($count !== 1){
        echo '<div class="alert alert-danger">Wrong username or password</div>';
    }else{

        
        $row = mysqli_fetch_array($result, MYSQLI_ASSOC);
        $_SESSION['user_id'] = $row['user_id'];
        $_SESSION['username'] = $row['username'];   
        $_SESSION['email'] = $row['email'];

        //if remember me is not checked
        if(empty($_POST['rememberme'])){
            echo "success";
            
        }else{
            // if rememberme is checked 
           
        }
    }
}
 
?>

在提交登录按钮时，我想将用户重定向到 mainpage.php。我尝试了在这里找到的所有不同的修复程序，但没有任何效果。我无法弄清楚我做错了什么。非常感谢任何帮助。

这是我提交表单时得到的

标签： javascriptphpjqueryajax

解决方案

阿斯拉·侯赛因

我已经测试了你的代码。引起我注意的第一件事是关于未定义变量的注意事项$error。可能您已经在其中定义了它，include('connection.php');但如果没有，这可能会导致您所期望的 PHP 输出出现问题。

此外，如果您 100% 确定控制台返回消息success- 您可以将 JavaScript 中的检查更改为：

if(data.indexOf('success') >= 0){
  window.location = "mainpage.php";
}else{
  $('#loginMessage').html(data);
}

可能不是问题的最佳解决方案，但至少会告诉您重定向正在工作

推荐阅读