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 相关文章推荐
php $_SERVER当前完整url的写法
Nov 12 PHP
PHP的5个安全措施小结
Jul 17 PHP
控制PHP的输出:缓存并压缩动态页面
Jun 11 PHP
sae使用smarty模板的方法
Dec 17 PHP
php返回json数据函数实例
Oct 09 PHP
php画图实例
Nov 05 PHP
php防止网站被攻击的应急代码
Oct 21 PHP
学习php设计模式 php实现备忘录模式(Memento)
Dec 09 PHP
分享PHP守护进程类
Dec 30 PHP
微信接口生成带参数的二维码
Jul 31 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
Aug 28 PHP
yii框架结合charjs实现统计30天数据的方法
Apr 04 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 fsockopen函数被禁用的解决办法
2013/08/07 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
宣传保护环境的公益广告词
2014/03/13 职场文书
职工代表大会主持词
2014/04/01 职场文书
师德师风的心得体会
2014/09/02 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
2015年信访工作总结
2015/04/07 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
无线电通信名词解释
2022/02/18 无线电