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

Question

嗨，有人可以帮我这个项目吗？这是图片

如果有人可以帮助我解决这个问题，请在这里进行一些编码，我遇到了多个问题具有蓝色图像的image.php使用php来获取图像名称，description等，并且图像存储在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部分之后