PHP+JQuery+AJAX+JSON 实现跟随滚动条的浏览商品记录模块

      东方CJ电视购物的网站上有这样一个功能，当你浏览过一件商品之后，那么在侧面会出现一个浮动层，里面是你刚刚浏览过的商品的图片。感觉非常的人性化，所以也想自己做一个。

      原理：每当用户查看了某件商品之后就把对应商品的ID记录到COOKIE里面，然后利用JQuery取得存在COOKIE里的数据，通过AJAX异步传输到处理页面，在处理页面进行相关的查询，并把结果集序列化为JSON格式返回。请求页得到返回的JSON数据后进行解析，并动态的生产HTML标记输出到页面上。并且要注册滚动条事件，这样浮动层就可以跟随滚动条一起滚动了。整个实现非常简单，真是应了那句话：有了JQuery，天天喝茶水！呵呵，先看下东方CJ上的效果图

 

      为了调用方便起见，我把请求页的JS单独写成一个JS文件。代码如下：

 

      请求页代码：

$(document).ready(function(){
 $.ajax({
  url:"/include/ajax_browserhistory.php", //处理页面地址
  type:"GET",  //条件方式
  dataType:"json", //返回数据格式为JSON
  data:null, //传递的参数
  success:function(data){
   CreateInterface(data);
  },
  error:function(){
   
  }
 });
});

//创建浏览记录浮动层
function CreateInterface(data){
 var Ldiv = "<table id='show' style='border:1px solid #ff0000;'><caption style='text-align:center;'>最近查看商品</caption>";
 var Idiv = "";
 for(var i=0;i<data.length;i++){
  Idiv += "<tr><td style='padding:3px; backgound:#999;border-bottom:1px dotted #333'><a href='/wholesale-"+data[i].C_Show+"-online/wholesale-"+data[i].P_Show+".shtml'><img src='/images/"+data[i].Picture+"' style='border:0;' width='82' height='82'/></a></td></tr>";
 }
 Ldiv += Idiv+"</table>";
 $('body').append(Ldiv);
 $('#show').css({
  "position":"absolute",
  "left":($('#show').offset().left+1)+ "px", //贴在屏幕最右边
  "top":(document.documentElement.scrollTop+120) + "px" //设置顶部定位
 });
}

//滚动条事件
$(document).ready(function(){
 $(window).scroll(function(){
  $('#show').css("top",(document.documentElement.scrollTop+120) + "px");
 });
});

 

 

      处理页面代码：

<?php
 require_once 'conn.php';
 $ps = $_COOKIE["ps"];
 $pid = explode(",",$ps);
 $sql = "SELECT p.ProductName,p.Picture,p.UrlShow AS P_Show,c.UrlShow AS C_Show FROM Product p,Category c
WHERE ProductID in(".implode(",",$pid).") AND p.CategoryID=c.CategoryID";
 $query = mysql_query($sql) or die(mysql_error());
 $rs = array();
 while($row = mysql_fetch_array($query)){
  $arr = array(
   'ProductName'=>$row["ProductName"],
   'Picture'=>$row["Picture"],
   'P_Show'=>$row["P_Show"],
   'C_Show'=>$row["C_Show"]
  );
  array_push($rs,$arr);
 }
 $json_str = json_encode($rs);  //序列化为JSON格式
 echo $json_str; //返回JSON数据
?>

 

      然后只需要在要显示的页面调用两个JS文件，特别要先调JQuery的库文件，不然会报$ is not defined的错误。以上只是初步实现了功能。尚有很多不足，如CSS样式还没定义等。由于本地测试没有图片映射，所以图片没有显示，但大体效果有了，如图：