使用ajax和php从数据库中获取行答案

【问题标题】：Fetching row from database using ajax and php使用ajax和php从数据库中获取行
【发布时间】：2025-12-11 16:45:02
【问题描述】：

我一直在尝试使用 ajax 和 php 来回显用户的个人资料照片，但我得到的只是一个空白页面。下面是我自己写的ajax和php代码。

Ajax

$('#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 代码没有错误。

【问题讨论】：

您是否尝试查看控制台日志中是否有任何错误？如果你直接加载profile_photo.php，它会显示什么吗？
检查您的图像路径。你究竟获得了什么成功？
@D.Dimitrov 我的代码现在可以正常工作了。

标签： php jquery ajax

【解决方案1】：

加载 .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 属性设置了任何内容..

【讨论】：

【解决方案2】：

您正在尝试通过 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 而不是完整的 img 标签

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

在html中

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

【讨论】：

【解决方案3】：

我认为当您使用 base64 图像时，它没有显示。您可以将简单的 src 添加到图像中以显示图像。这是一个例子：

&lt;img src="smiley.gif" alt="Smiley face" height="42" width="42"&gt;

只要根据你的实际来源更改来源即可。

【讨论】：