ajax 無法接收到data

蘇格
各位前輩好,小弟利用網路教學試做了後台管理,在管理登入介面發生了以下問題
帳號與密碼成功配對回傳yes,但ajax收不到回傳data,跳出了登入失敗的警示,重新整理後直接進入了index.php,
使用Chrome & Firefox都是相同結果,其他配置都與教學影片的內容相同,還望前輩們賜教與解惑,謝謝!

login.php
<?php
//載入 db.php 檔案,讓我們可以透過它連接資料庫,因為此檔案放在 admin 裡,要找到 db.php 就要回上一層 ../php 裡面才能找到
require_once '../php/db.php';
require_once '../php/functions.php';

//如過有 $_SESSION['is_login'] 這個值,以及 $_SESSION['is_login'] 為 true 都代表已登入
if (isset($_SESSION['is_login']) && $_SESSION['is_login']) {
    //直接轉跳到 index.php 後端首頁
    header("Location: index.php");
}
?>

<!DOCTYPE html>
<html lang="zh-TW">

<head>
    <title>管理登入</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- 給行動裝置或平板顯示用,根據裝置寬度而定,初始放大比例 1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 載入 bootstrap 的 css 方便我們快速設計網站-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/style.css" />
</head>

<body>
    <!-- 網站內容 -->
    <div class="content">
        <div class="container">
            <!-- 建立第一個 row 空間,裡面準備放格線系統 -->
            <div class="row">
                <!-- 在 xs 尺寸,佔12格,可參考 http://getbootstrap.com/css/#grid 說明-->
                <div class="col-xs-12 col-sm-4 col-sm-offset-4">
                    <h1>管理員登入</h1>
                    <form class="login">
                        <div class="form-group">
                            <label for="username">帳號</label>
                            <input type="text" class="form-control" id="username" name="username" placeholder="請輸入帳號" required>
                        </div>
                        <div class="form-group">
                            <label for="password">密碼</label>
                            <input type="password" class="form-control" id="password" name="password" placeholder="請輸入密碼" required>
                        </div>
                        <button type="submit" class="btn btn-default">
                            登入
                        </button>
                        <!-- <p>Don't have an account? <a href="register.php">立即註冊</a>.</p> -->
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 在表單送出前,檢查確認密碼是否輸入一樣 -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        //當文件準備好時,
        $(document).on("ready", function() {
            //當表單 sumbit 出去的時候
            $("form.login").on("submit", function() {
                //使用 ajax 送出 帳密給 verify_user.php
                $.ajax({
                    type: "POST",
                    url: "../php/verify_user.php", //因為此 login.php 是放在 admin 資料夾內,若要前往 php,就要回上一層
                    data: {
                        un : $("#username").val(), //使用者帳號
                        pw : $("#password").val() //使用者密碼
                    },
                    dataType: 'html' //設定該網頁回應的會是 html 格式
                }).done(function(data) {
                    //成功的時候
                    console.log(data);
                    if ( data == "yes") {
                        //註冊新增成功,轉跳到登入頁面。
                        window.location.href = "index.php"; //因為目前的 login.php 跟後端的 index.php 首頁在同一資料夾,所以直接叫他就好
                    } else {
                        alert("登入失敗,請確認帳號密碼");
                        
                    }

                }).fail(function(jqXHR, textStatus, errorThrown) {
                    //失敗的時候
                    alert("有錯誤產生,請看 console log");
                    console.log(jqXHR.responseText);
                });
                //回傳 false 為了要阻止 form 繼續送出去。由上方ajax處理即可
                return false;
            });
        });
    </script>
    <!-- 頁底 -->
    <?php
    include_once 'footer.php';
    ?>
</body>

</html>




index.php
<?php
require_once '../php/db.php';

//如過沒有 $_SESSION['is_login'] 這個值,或者 $_SESSION['is_login'] 為 false 都代表沒登入
if (!isset($_SESSION['is_login']) || !$_SESSION['is_login']) {
    //直接轉跳到 login.php
    header("Location: login.php");
}
?>

<!DOCTYPE html>
<html lang="zh-TW">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- 給行動裝置或平板顯示用,根據裝置寬度而定,初始放大比例 1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://kit.fontawesome.com/7568312dca.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/style.css" />
    <?php include_once 'header.php'; ?>
    <title>Welcome</title>
</head>

<body>

    <?php include_once 'main-nav.php'; ?>
    <!--content -->
    <div class="content">
        <div class="container">
            <!-- 建立第一個 row 空間,裡面準備放格線系統 -->
            <div class="row">
                <!-- 在 xs 尺寸,佔12格,可參考 http://getbootstrap.com/css/#grid 說明-->
                <div class="col-xs-12">
                    <div class="alert alert-success text-center" role="alert">
                        管理者您好,請點上方管理選單,進行管理。
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- bottom -->
    <?php include_once 'footer.php'; ?>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</body>

</html>


verify_user.php
<?php
//載入資料庫與處理的方法
require_once 'db.php';
require_once 'functions.php';

//執行驗證的方法,把帳密帶入,因為會回傳一個值,所以也可以直接寫在if判別中,不用再另外寫變數
if (verify_user($_POST['un'], $_POST['pw'])) 
{
    //若為true 代表登入成功,印出yes
    echo 'yes';
} 
else {
    //若為 null 或者 false 代表失敗
    echo 'no';
}


?>


function.php
function verify_user($username, $password)
{
    //宣告要回傳的結果
    $result = null;
    //先把密碼用md5加密
    $password = md5($password);
    //將查詢語法當成字串,記錄在$sql變數中
    $sql = "SELECT * FROM `users` WHERE `username` = '{$username}' AND `password` = '{$password}'";

    //用 mysqli_query 方法取執行請求(也就是sql語法),請求後的結果存在 $query 變數中
    $query = mysqli_query($_SESSION['link'], $sql);

    //如果請求成功
    if ($query) {
        //使用 mysqli_num_rows 回傳 $query 請求的結果數量有幾筆,為一筆代表找到會員且密碼正確。
        if (mysqli_num_rows($query) == 1) {
            //取得使用者資料
            $user = mysqli_fetch_assoc($query);

            //在session裡設定 is_login 並給 true 值,代表已經登入
            $_SESSION['is_login'] = true;
            //紀錄登入者的id,之後若要隨時取得使用者資料時,可以透過 $_SESSION['login_user_id'] 取用
            $_SESSION['login_user_id'] = $user['id'];

            //回傳的 $result 就給 true 代表驗證成功
            $result = true;
        }
    } else {
        echo "{$sql} 語法執行失敗,錯誤訊息:" . mysqli_error($_SESSION['link']);
    }

    //回傳結果
    return $result;
}



db.php
<?php
//啟動 session 等下要來儲存 連線後的資訊,前面加上 @ 是為了要讓此方法執行時,若有錯誤訊息不要顯示。
session_start();
//先設定資料庫資訊,主機通常都用本機
$host = 'localhost';
//以root管理者帳號進入資料庫
$dbuser = 'nculib';
//root的資料庫密碼
$dbpw = '1234';
//登入後要使用的資料庫
$dbname = 'nculibusr';

//宣告一個 link 變數,並執行連結資料庫函式 mysqli_connect(),連結結果會帶入 link 當中
$_SESSION['link'] = mysqli_connect($host, $dbuser, $dbpw, $dbname);

if ($_SESSION['link']) {
  //若傳回正值,就代表已經連線
  //設定連線編碼為UTF-8
  //mysqli_query(資料庫連線, "語法內容") 為執行sql語法的函式
    mysqli_query($_SESSION['link'], "SET NAMES utf8");
    // echo "已正確連線";
} else {
  //否則就代表連線失敗 mysqli_connect_error() 是顯示連線錯誤訊息
    echo '無法連線mysql資料庫 :<br/>' . mysqli_connect_error();
}

?>



缺氧的羊:窒息
你都寫了 console.log(data);
不順便看一下data的內容嗎, 也許verify_user.php的輸出結果並不只有 yes 三個字母而已...
蘇格
回覆#1 前輩您好,感謝您抽空回覆,我有確認過console.log(data)的部分,確定是yes三個字元,奇怪的事怎麼也跑不進if條件裡(換過字也一樣無法進入成功的條件),我有考慮把檔案砍掉重寫過,也不曉得會不會是資料庫名稱的問題,總之非常謝謝提點,我會繼續除錯的。
阿恢
改成這樣看看...
if (data === 'yes') {

迷路
把dataType改成text看看
蘇格
#3,#4 感謝前輩撥空回覆,這兩個方法也不能順利執行,謝謝!
想睡覺
可以看看yes 是否為3個字元(有時候有空白字元但您看不出來)
或是用typeof 去看看型態是否如您所想的那樣
想睡覺
補充一下 把 login.php 69行 拿掉試看看
缺氧的羊:窒息
多加一行 console.log(data.length)
看看你輸出的yes, 是不是剛好3個字(不是的話就可以確定有多出額外的空白之類的)
蘇格
謝謝各位前輩的耐心回覆,試過各方法後我還是決定砍掉資料庫,重新建立一個,問題果然消失了,雖然找不出確切的問題點,不過仍然很謝謝熱心的前輩們
回到頂部