如何用PHP+JSON+JavaScript显示数据库图片？报错排查求助

安全阿岳

2026-7-24

问题排查与解决方案

问题概述

尝试通过PHP+JavaScript以JSON格式从数据库获取图片并在网页显示，运行时出现报错：

The requested URL was not found on this server

现有代码

JavaScript/AJAX代码

function load_data(query = '', page_number = 1)
{
    var form_data = new FormData();

    form_data.append('query', query);
    form_data.append('page', page_number);

    var ajax_request = new XMLHttpRequest();
    ajax_request.open('POST', 'process_data.php');
    ajax_request.send(form_data);

    ajax_request.onreadystatechange = function()
    {
        if(ajax_request.readyState == 4 && ajax_request.status == 200)
        {
            var response = JSON.parse(ajax_request.responseText);
            var html = '';
            var serial_no = 1;

            if(response.data.length > 0)
            {
                for(var count = 0; count < response.data.length; count++)
                {
                    html += '<tr>';
                    html += '<td>'+"<img src='"+filename+"'>"+'</td>';
                    html += '<td>'+response.data[count].tag+'</td>';
                    html += '</tr>';
                    serial_no++;
                }
            }
            else
            {
                html += '<tr><td colspan="3" class="text-center">No Data Found</td></tr>';
            }

            document.getElementById('post_data').innerHTML = html;
            document.getElementById('total_data').innerHTML = response.total_data;
            document.getElementById('pagination_link').innerHTML = response.pagination;
        }
    }
}

PROCESS_DATA.PHP代码

if(isset($_POST["query"]))
{
    $a=1;
    $data = array();
    $limit = 5;
    $page = 1;

    if($_POST["page"] > 1)
    {
        $start = (($_POST["page"] - 1) * $limit);
        $page = $_POST["page"];
    }
    else
    {
        $start = 0;
    }

    if($_POST["query"] != '')
    {
        $condition = preg_replace('/[^A-Za-z0-9\- ]/', '', $_POST["query"]);
        $condition = trim($condition);
        $condition = str_replace(" ", "%", $condition);

        $sample_data = array(
            ':tag'          =>  '%' . $condition . '%',
        );

        $query = " SELECT filename, tag FROM tags WHERE tag LIKE :tag ";
        $filter_query = $query . ' LIMIT ' . $start . ', ' . $limit . '';

        $statement = $conn->prepare($query);
        $statement->execute($sample_data);
        $total_data = $statement->rowCount();

        $statement = $conn->prepare($filter_query);
        $statement->execute($sample_data);
        $result = $statement->fetchAll();

        $replace_array_1 = explode('%', $condition);
        foreach($replace_array_1 as $row_data)
        {
            $replace_array_2[] = '<span style="background-color:#'.rand(100000, 999999).'; color:#fff">'.$row_data.'</span>';
        }

        foreach($result as $row)
        {
            $data[] = array(
                'image'     =>  str_ireplace($replace_array_1, $replace_array_2, $row["filename"]),
                'tag'   =>  str_ireplace($replace_array_1, $replace_array_2, $row["tag"])
            );
        }
    }
    else
    {
        $query = "SELECT filename, tag FROM tags";
        $filter_query = $query . ' LIMIT ' . $start . ', ' . $limit . '';

        $statement = $conn->prepare($query);
        $statement->execute();
        $total_data = $statement->rowCount();

        $statement = $conn->prepare($filter_query);
        $statement->execute();
        $result = $statement->fetchAll();

        foreach($result as $row)
        {
            $data[] = array(
                'image'         =>  $row['filename'],
                'tag'       =>  $row['tag']
            );
        }
    }

    $pagination_html = '
    <div align="center">
        <ul class="pagination">
    ';

    $total_links = ceil($total_data/$limit);
    $previous_link = '';
    $next_link = '';
    $page_link = '';

    if($total_links > 4)
    {
        if($page < 5)
        {
            for($count = 1; $count <= 5; $count++)
            {
                $page_array[] = $count;
            }
            $page_array[] = '...';
            $page_array[] = $total_links;
        }
        else
        {
            $end_limit = $total_links - 5;
            if($page > $end_limit)
            {
                $page_array[] = 1;
                $page_array[] = '...';
                for($count = $end_limit; $count <= $total_links; $count++)
                {
                    $page_array[] = $count;
                }
            }
            else
            {
                $page_array[] = 1;
                $page_array[] = '...';
                for($count = $page - 1; $count <= $page + 1; $count++)
                {
                    $page_array[] = $count;
                }
                $page_array[] = '...';
                $page_array[] = $total_links;
            }
        }
    }
    else
    {
        for($count = 1; $count <= $total_links; $count++)
        {
            $page_array[] = $count;
        }
    }

    for($count = 0; $count < count($page_array); $count++)
    {
        if($page == $page_array[$count])
        {
            $page_link .= '
            <li class="page-item active">
                <a class="page-link" href="#">'.$page_array[$count].' <span class="sr-only">(current)</span></a>
            </li>
            ';

            $previous_id = $page_array[$count] - 1;
            if($previous_id > 0)
            {
                $previous_link = '<li class="page-item"><a class="page-link" href="javascript:load_data(`'.$_POST["query"].'`, '.$previous_id.')">Previous</a></li>';
            }
            else
            {
                $previous_link = '
                <li class="page-item disabled">
                    <a class="page-link" href="#">Previous</a>
                </li>
                ';
            }

            $next_id = $page_array[$count] + 1;
            if($next_id >= $total_links)
            {
                $next_link = '
                <li class="page-item disabled">
                    <a class="page-link" href="#">Next</a>
                </li>
                ';
            }
            else
            {
                $next_link = '
                <li class="page-item"><a class="page-link" href="javascript:load_data(`'.$_POST["query"].'`, '.$next_id.')">Next</a></li>
                ';
            }
        }
        else
        {
            if($page_array[$count] == '...')
            {
                $page_link .= '
                <li class="page-item disabled">
                    <a class="page-link" href="#">...</a>
                </li>
                ';
            }
            else
            {
                $page_link .= '
                <li class="page-item">
                    <a class="page-link" href="javascript:load_data(`'.$_POST["query"].'`, '.$page_array[$count].')">'.$page_array[$count].'</a>
                </li>
                ';
            }
        }
    }

    $pagination_html .= $previous_link . $page_link . $next_link;
    $pagination_html .= '
        </ul>
    </div>
    ';

    $output = array(
        'data'              =>  $data,
        'pagination'        =>  $pagination_html,
        'total_data'        =>  $total_data
    );
    echo json_encode($output);
}

问题排查与修复步骤

1. 解决404错误（核心问题）

报错提示找不到请求的URL，按以下步骤检查：

文件路径验证：确认process_data.php和调用AJAX的HTML/JS文件在同一目录。若不在同一目录，修改AJAX请求路径，比如JS在js/目录、PHP在根目录时，路径改为../process_data.php。
文件名大小写：Linux服务器区分文件名大小写，确保代码中process_data.php与实际文件名完全一致，避免大小写差异。
服务器配置检查：确认process_data.php未被.htaccess或服务器配置拦截，确保服务器允许访问该文件。

2. 修复代码中的其他潜在问题

JavaScript部分

未定义变量filename：将图片行代码中的filename替换为接口返回的图片路径：
```
html += '<td><img src="'+response.data[count].image+'"></td>';
```

添加错误处理：增加状态码非200时的调试提示：

else {
    console.error('请求失败，状态码：' + ajax_request.status);
}

PHP部分

添加数据库连接：代码中$conn未初始化，在文件开头添加PDO连接代码（替换为你的数据库信息）：

$host = 'localhost';
$dbname = '你的数据库名';
$username = '你的用户名';
$password = '你的密码';

try {
    $conn = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
    die("数据库连接失败: " . $e->getMessage());
}

修复图片路径被篡改问题：搜索时不要替换文件名（否则图片路径失效），仅替换标签：

foreach($result as $row)
{
    $data[] = array(
        'image'     =>  $row["filename"],
        'tag'   =>  str_ireplace($replace_array_1, $replace_array_2, $row["tag"])
    );
}

初始化$page_array：在使用前添加$page_array = array();，避免PHP警告。

3. 测试验证

修复后，先通过Postman或浏览器插件模拟POST请求访问process_data.php，确认返回正确JSON数据，再测试前端AJAX调用是否正常显示图片和数据。

内容的提问来源于stack exchange，提问作者Juma Ijesun

如何用PHP+JSON+JavaScript显示数据库图片？报错排查求助

问题概述 #

现有代码 #

JavaScript/AJAX代码 #

PROCESS_DATA.PHP代码 #

问题排查与修复步骤 #

1. 解决404错误（核心问题） #

2. 修复代码中的其他潜在问题 #