2013-02-25 83 views
1

喜有人可以幫助我這個項目在這裏阿賈克斯顯示

我有許多問題,如果有人能幫助我這個和一些編碼在這裏的圖像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的我不知道如何正確地表現出來,並再次感謝

+0

圖像路徑是相對於當前加載的頁面的路徑嗎? – Jon 2013-02-25 03:32:19

+0

你確定你有一個物理副本的圖像與您在數據庫中檢索到的圖像名稱? – Floricel 2013-02-25 03:41:03

+0

是的圖像顯示在product.php中,但是當我在索引中使用ajax調用它時,它不顯示圖像,但它顯示從php中的數據庫中的字符串或查詢,我只添加圖像是問題 – user1868185 2013-02-25 05:52:00

回答

1

其確定我得到它,我用一些JavaScript來騙取顯示使用該

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

阿賈克斯部分

圖片後我的路