php - Ajax 显示使用 php 在目录中显示带有图像显示的导航

Question

嗨，有人可以帮我完成这个元素吗？这是图片

如果有人能帮我解决这个问题和这里的一些编码，我会遇到很多问题 有蓝色图像的 image.php 使用 php 获取图像名称、描述等，图像存储在一个目录中php 只调用名称..

问题是当我调用页面时图像不显示但是来自数据库的数据/字符串显示而不是图像部分我该如何解决这个问题？

我还有一个连接到数据库并显示产品列表的导航 我如何在这里使用 ajax 在数据库中添加产品 ID 名称，这样我就不必添加越来越多的文件，只需一个 php显示产品的页面及其中的图像是我使用的编码

CSS 代码

<style>
    #body{
        background-image:url(bg0.png);
        background-repeat:repeat-x;
        width:100%;
        height:100%;            
    }

    #header{
        width:90%;
        height:150px;
        background-color:#39F;
        margin:auto;
        background-image:url(hd.png);
        border-radius: 15px;
        -moz-box-shadow: 3px 3px 4px #000;
        -webkit-box-shadow: 3px 3px 4px #000;
        box-shadow: 10px 10px 25px #000;

    }

    #himg{      
        border-radius: 0px 0px 0px 15px;
    }

    #navi{
        float:left;
        width:20%;
        height: 500px;
        margin-left: 74px;
        margin-top: 10px;
        border-radius: 100px 0px 100px 0px;     
        overflow:hidden;
        position:relative;
        background-color:#456B87;
        background-image:url(nav1.png);         
        -moz-box-shadow: 3px 3px 4px #000;
        -webkit-box-shadow: 3px 3px 4px #000;
        box-shadow: 8px 10px 8px #000;

    }

    #navi ol{
        clear:left;
        float:left;
        list-style:none;
        margin:0;
        padding: 0;
        position:relative;
        text-align:center;
        left:50%;
        vertical-align:middle;
        display:table-cell;
    }

    #navi ol li{
        display:block;
        float:left;
        list-style:none;
        margin:0;
        padding:0;
        position:relative;
        right:50%;
    }

    #navi ol li details{
        border-style:solid;
        border-radius:  25px 0px 25px 0px;
        width: 200px;
        background-color:#FDB735;
    }

    #navi ol li details summary::-webkit-details-marker { display:none; }

    #bod{
        background-color:#FFFFFF;
        float:left;
        width: 69%;
        max-width: 69%;
        margin-left: 9px;
        margin-top: 10px;
        height: 500px;
        max-height: 500px;
        border-radius: 15px;
        background-image:url(nav1.png); 
        -moz-box-shadow: 3px 3px 4px #000;
        -webkit-box-shadow: 3px 3px 4px #000;
        box-shadow: 10px 10px 15px #000;
    }

    #main{
        background-color:#FFFFFF;
        width: 95%;     
        margin-top: 20px;
        border-radius: 15px;        
        height: 90%;                
    }

</style>

AJAX/JavaScript 代码

<script language="JavaScript" type="text/javascript">
    function getXmlHttpRequestObject() {
        if (window.XMLHttpRequest) {
            return new XMLHttpRequest(); //Not IE
        } else if(window.ActiveXObject) {
            return new ActiveXObject("Microsoft.XMLHTTP"); //IE
            alert("Your browser doesn't support the XmlHttpRequest object.  Better upgrade to Firefox.");
        }
    }           
    var receiveReq = getXmlHttpRequestObject();     
    function catia() {
        if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
            receiveReq.open("GET", 'products/product-display-cat.php', true);
            receiveReq.onreadystatechange = handleCat; 
            receiveReq.send(null);
        }           
    }
    function handleCat() {
        if (receiveReq.readyState == 4) {
            document.getElementById('main').innerHTML = receiveReq.responseText;

        }
    }
</script>

java脚本结束

HTML 代码

<div id='navi'>
    </br>
    </br>
    <ol>
        <li><details>
            <summary>Products</summary>
            <table align='center'>
                <tr>
                    <td><a href='javascript:cat();'>Catia</a></td>
                </tr>

            </table>                    
        </details></li>
    </ol>
</div>

HTML 代码结束

这是我使用 ajax 调用的原始页面代码

<?php
$result = mysql_query("SELECT * FROM products WHERE ID='6'");                
while($row = mysql_fetch_array($result))                    
{echo"
    <tr><td><img src='image/1361663812.png'></td></tr>

    <tr><td colspan='2'><img src='image/".$row['Logo']."'></td></tr>        

    <tr><td>Product: ".$row['Product']."</td></tr>
":}
?>

原页面代码到此结束

在这里非常感谢一些帮助，甚至是一点帮助，感谢您的时间和努力!抱歉，我不知道如何正确显示 javascript，再次感谢

Answer 1

没关系，我明白了，我使用了一些 javascript 来欺骗我使用这个显示图片的方式

document.getElementById('img').style.visibility = 'visible';
                    document.getElementById('img').style.display = 'block';
                    document.getElementById('img').src='products/image/1361663812.png';

在ajax部分之后