php+ajax实现商品对比功能示例


Posted in PHP onApril 13, 2019

本文实例讲述了php+ajax实现商品对比功能。分享给大家供大家参考,具体如下:

商品对比调用的JS文件(包含了商品对比框浮动JS):

/*浮动窗口*/
(function(){
 var n=10;
 var obj=document.getElementById("goods-compare");
 if(!obj){
  return false;
 }
 var x=0;
 window.onscroll=function(){
  obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';
 };
 window.onresize=function(){
  obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';
 };
})();
//添加显示对比框
function addcompare(chk){
 $('#goods-compare').fadeIn().show();
 var count=$(".compare-box li").length;
 if (count>2)//这里可以修改对比的数据哦
 {
  alert('产品比较最多选3种哦');
  return;
 }
 $.ajax({
  type: 'post',
  url: 'ajax.php',
  data: {
   'action':'1',
   'gid':chk.gid,//商品ID
   'gname':chk.gname,//商品名称
   'gtype':chk.gtype//商品类别,类别不同时不能比较
  },
  cache: false,
  async: false,
  success: function(result) {
   if(result!='')
   {
    alert(result);
   }else{
    var url='http://www.lusen.com/product-'+chk.gid+'.html';//设置商品的链接地址
    $(".compare-box").append("<li class='division clearfix' id='"+chk.gid+"'><div class='span-3'><a href='"+url+"' target='_blank' title='"+chk.gname+"'>'"+chk.gname+"'</a></div><span onclick=\"removecompare('"+chk.gid+"');\">删除</span></li>")
    $("#comids").val($(".compare-box li").map(function(){//将对比的所有商品ID,赋值给#comids
     return $(this).attr('id');
    }).get().join(","));
   }
  }
 });
}
//删除对比产品
function removecompare(id)
{
 $.ajax({
  type: 'post',
  url: 'ajax.php',
  data: {
   'action':'2',
   'gid':id
  },
  cache: false,
  success: function(result) {
   $("#"+id).remove();
   $("#comids").val($(".compare-box li").map(function(){
    return $(this).attr('id');
   }).get().join(","));
  }
 });
}
//清空对比产品
function clearcompare()
{
 $.ajax({
  type: 'post',
  url: 'ajax.php',
  data: {
   'action':'3'
  },
  cache: false,
  success: function(result) {
   $(".compare-box").html('');
   $("#comids").val('');
  }
 });
}
//显示对比框
function showcompare()
{
 $.ajax({
  type: 'post',
  url: 'ajax.php',
  data: {
   'action':'4'
  },
  success: function(result) {
   if(result){
    $(".compare-box").append(result);
    $("#comids").val($(".compare-box li").map(function(){
     return $(this).attr('id');
    }).get().join(","));
    $('#goods-compare').fadeIn().show();
   }
  }
 });
}
//点击关闭对比框
$('.close-gc').click(function(){
 $('#goods-compare').fadeOut().hide();
});

商品对比调用Ajax文件:

<?php
function mb_unserialize($serial_str) {
 $serial_str =stripslashes($serial_str);
 return unserialize($serial_str);
}
if($_POST['action']=='1') {//add
 if(isset($_COOKIE['gtype'])) {
  if($_COOKIE['gtype']!=$_POST['gtype']) {
   echo '对不起,您选择的是不同类别的产品无法加入对比,请选择同类产品或清空当前对比栏再选择。';
   return;
  }
 }else {
  setcookie('gtype',$_POST['gtype']);
 }
 if(isset($_COOKIE['gid'])) {
  $arr_str = $_COOKIE['gid'];
  $arr=mb_unserialize($arr_str);
  if(count($arr)>2) {//商品比较数量
   echo "商品比较最多选3种";
   return;
  }
  foreach($arr as $val) {
   if($val[0]==$_POST['gid']) {
    echo "该商品已经加入对比框";
    return;
   }
  }
  $info=array($_POST['gid'],$_POST['gname'],$_POST['gtype']);
  $arr[]=$info;
  $arr_str=serialize($arr);
  setcookie('gid',$arr_str);
 }else {
  $info=array($_POST['gid'],$_POST['gname'],$_POST['gtype']);
  $arr[]=$info;
  $arr_str=serialize($arr);
  setcookie('gid',$arr_str);
 }
}else if($_POST['action']=='2') {//delone
 $id=$_POST['gid'];
 $arr_str = $_COOKIE['gid'];
 $arr=mb_unserialize($arr_str);
 foreach($arr as $key=>$val) {
  if($val[0]==$id) {
   unset ($arr[$key]);
  }
 }
 $arr_str=serialize($arr);
 setcookie('gid',$arr_str);
}else if($_POST['action']=='3') {//delall
 setcookie('gid','');
 setcookie('gtype','');
}else if($_POST['action']=='4') {//showlist
 if(isset($_COOKIE['gid'])) {
  $data='';
  $arr_str = $_COOKIE['gid'];
  $arr=mb_unserialize($arr_str);
  foreach ($arr as $val){
   $url="http://www.lusen.com/product-".$val[0].".html";
   $data.="<li id='{$val[0]}' class='division clearfix'><div class='span-3'><a href='{$url}' target='_blank' title='{$val[1]}'>{$val[1]}</a></div><span onclick=\"removecompare('{$val[0]}');\">删除</span></li>";
  }
  echo $data;
 }
}
?>

希望本文所述对大家PHP程序设计有所帮助。

PHP 相关文章推荐
最小化数据传输――在客户端存储数据
Oct 09 PHP
基于mysql的bbs设计(二)
Oct 09 PHP
php的ajax简单实例
Feb 27 PHP
PHP中echo和print的区别
Aug 28 PHP
php格式化金额函数分享
Feb 02 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
Feb 07 PHP
php实现将Session写入数据库
Jul 26 PHP
学习php设计模式 php实现状态模式
Dec 07 PHP
PHP数学运算与数据处理实例分析
Apr 01 PHP
详解Yii2 rules 的验证规则
Dec 02 PHP
ThinkPHP实现图片上传操作的方法详解
May 08 PHP
零基础php编程好学吗
Oct 11 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
Apr 12 #PHP
详解PHP素材图片上传、下载功能
Apr 12 #PHP
laravel 事件/监听器实例代码
Apr 12 #PHP
Laravel5.7 数据库操作迁移的实现方法
Apr 12 #PHP
laravel使用Faker数据填充的实现方法
Apr 12 #PHP
Laravel5.7 Eloquent ORM快速入门详解
Apr 12 #PHP
laravel 数据迁移与 Eloquent ORM的实现方法
Apr 12 #PHP
You might like
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
php中Snoopy类用法实例
2015/06/19 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
python 搜索大文件的实例代码
2019/07/08 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
Python socket服务常用操作代码实例
2020/06/22 Python
python中_del_还原数据的方法
2020/12/09 Python
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
行政总监岗位职责
2013/12/05 职场文书
医院门卫岗位职责
2013/12/30 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
《海上日出》教学反思
2016/02/23 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
德劲DE1105机评
2022/04/05 无线电