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>";
评论9