使用ajax和php從數據庫中獲取行

Question

我一直在嘗試使用ajax和php來回顯用戶的個人資料照片，但除了空白頁面外，我什么也沒有。 以下是我自己編寫的我的ajax和php代碼。

阿賈克斯

$('#profile_photo').html('<img src="loading.gif" alt="loading..." width="20px" height="20px" >');

$(document).ready(function() {
    $.ajax( {    
        type: "GET",
        url: "profile_photo.php",             
        dataType: "html",   
        success: function(d) {                    
             $("#profile_photo").html(d); 
        }
    });
});

PHP（profile_photo.php）

<?php  
    // connect to db
    include 'db.php';

    // start session
    session_start();

    // user id 
    $id = $_SESSION['id'];
    $user = $_SESSION['name'];

    // variables

    // profile photo
    $profile_photo_query = mysqli_query($db_var, "SELECT * FROM users_profile_photo WHERE id = '$id'"); 
    while ($row = mysqli_fetch_array($profile_photo_query, MYSQLI_ASSOC)) {
        $set_profile_photo = $row["image"];
    }

        // for profile photo (encode with base64)
        if ($set_profile_photo == null) {
            echo "<img src='data:image/png;base64,".base64_encode(file_get_contents("profile_photo/default.png"))."' alt='".$user."' title='".$user."' onContextMenu='return false;'";
        } else {
            echo "<img src='data:image/png;base64,".base64_encode(file_get_contents("profile_photo/$set_profile_photo"))."' alt='".$user."' title='".$user."' onContextMenu='return false;'";
        }
?>

HTML

<div class="prev">
   <span id="profile_photo"></span>
</div>

CSS（上一頁）

.prev {
    width: 120px;
    height: 120px;
    border: 5px solid #fff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    overflow: hidden;
    margin-left: 10px;
    background-color: white;
    position: absolute;
    margin-top: -80px;
    z-index: 1000;
}
.prev img {
    width: 100%;
    height: 100%;
}

Ajax成功加載了加載圖像（.gif），但加載完成后顯示空白頁面。 我想知道為什么未顯示個人資料照片，因為我的php代碼沒有錯誤。

Answer 1

您正在嘗試通過ajax響應將php代碼導入img標簽，而您想將其放入html代碼中，因此請嘗試此代碼。

在JavaScript代碼中

$(document).ready(function() {
$.ajax( {    
    type: "GET",
    url: "profile_photo.php",             
    dataType: "html",   
    success: function(d) {                    
         $("#image").attr("src", d);
    }
});
});

在PHP中只是echo src not full img tag

 if ($set_profile_photo == null) {
        // echo just path of file
    } else {
        // echo just path of file
    }

在html中

<div class="prev">
<img id="image">
</div>

Answer 2

它不是加載.gif的Ajax。 此代碼之前已完成：

$('#profile_photo').html('<img src="loading.gif" alt="loading..." width="20px" height="20px" >');

首先，您在此處的代碼末尾缺少“>”：

echo "<img src='data:image/png;base64,".base64_encode(file_get_contents("profile_photo/default.png"))."' alt='".$user."' title='".$user."' onContextMenu='return false;'";

檢查是否對img src屬性設置了任何內容。

Answer 3

我認為當您使用base64圖像時，它沒有顯示。 您可以將簡單的src添加到圖像中以顯示圖像。 這是示例：

 <img src="smiley.gif" alt="Smiley face" height="42" width="42"> 

只需根據您的實際來源更改來源。