2015-05-10 41 views
1

我想做一個簡單的產品比較系統到目前爲止我所做的就是我能夠使它像當我單擊添加比較按鈕我發送jQuery的ajax請求並獲得該產品的回撥響應,但是我不知道它是如何將產品保留在頁面上的,或者將compare-container上的項目顯示爲cookie,因此當用戶刷新產品時仍然存在,我的代碼就像,使用PHP比較產品保留頁面上的產品作爲cookie

COMPARE.PHP

<html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 

    <script> 
    $(document).ready(function(){ 
    $('.compare').click(function(){ 
    a = this.parentNode.getAttribute('data-compare-id'); 
     $.get('post.php?id='+a,status,foo); 
    }); 

    });    
     function foo(data){     
     console.log();    
     }    
    </script> 
    </head> 
    <body> 

     <?php   
    mysql_connect("localhost",'root','GoogleFacebook') or die(mysql_error()); 
    mysql_select_db('phones') or die(mysql_error()); 
    $query = mysql_query("SELECT * FROM mobiles"); 
    while($row = mysql_fetch_array($query)){ 

     echo "<div class='phone' data-compare-id='".$row['id']."' style='display:inline-block;margin:10px;border:1px solid #ddd;padding:10px;' >"; 
     echo "<a href='".$row['phone_a']."' >"; 
     echo $row['phone_name']."</br>"; 
     echo "<img src='".$row['phone_img']."' />"; 
     echo "</br>"; 
     echo "</a>"; 
     echo "<button class='compare'>Compare</button>"; 
     echo "</div>";   
    } 
    ?> 

     <div class='compare_container'> 
     </div> 
    </body> 

</html> 

post.php中

<?php 
if($_SERVER['REQUEST_METHOD'] == 'GET'){ 
$id = $_GET['id']; 
mysql_connect("localhost",'root','GoogleFacebook') or die(mysql_error()); 
mysql_select_db('phones') or die(mysql_error()); 
$query = mysql_query("SELECT * FROM mobiles WHERE id='$id'"); 
$row = mysql_fetch_array($query); 
echo "<img src='".$row['phone_img']."' />"; 
echo "<span>".$row['phone_name']."</span>";} 
?> 

我弄糊塗瞭如何保持內容的頁面

回答

0
$.get('post.php?id='+$(this).parent().attr('data-compare-id'),function (data) { 
    $('.compare_container').append(data); 
},'html'); 

。如果你使用jQuery,您應該使用$()來找到你的DOM元素。上面的代碼將執行ajax調用post.php並獲取您的html。它將通過函數作爲數據變量傳遞結果,然後將該數據附加到容器。

儘管您的代碼還存在其他問題。你應該逃避所有的令牌,以避免SQL注入,這是使用mysqli(改進)而不是mysql的最佳實踐。您還應該避免使用SELECT *來避免在數據庫上使用過多的資源 - 請改用SELECT phone_img,phone_name。

同樣經過進一步的審查,你正在加載jQuery的1.11.2時,最新版本是2+,這可能會導致你的問題。

+0

我能夠追加產品,但如何保持產品在compare_container使用cookie,安全不是概率,我正在做的所有在本地主機,在現場我將使用mysql_real_escape_string,我錯誤地使用舊版本的jquery –

+0

在我看來,最簡單的方法是使用會話變量。將id值作爲數組存儲在會話變量中,如果它們刷新頁面,則使用該數組顯示值。您每次都使用ajax get請求來訪問服務器,因此只需使用array_push將該id添加到會話變量即可。 – user2247281