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数据库连接时容易出错的特殊符号问题
Sep 01 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
May 04 PHP
PHP无限分类(树形类)的深入分析
Jun 02 PHP
php使用百度天气接口示例
Apr 22 PHP
浅谈PHP解析URL函数parse_url和parse_str
Nov 11 PHP
PHP浮点数精度问题汇总
May 13 PHP
php实现word转html的方法
Jan 22 PHP
PHP实现的构造sql语句类实例
Feb 03 PHP
基于PHP微信红包的算法探讨
Jul 21 PHP
PHP中CheckBox多选框上传失败的代码写法
Feb 13 PHP
phpStudy配置多站点多域名和多端口的方法
Sep 01 PHP
php无限极分类实现方法分析
Jul 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
WINXP下apache+php4+mysql
2006/11/25 PHP
UCenter Home二次开发指南
2009/05/28 PHP
php面向对象全攻略 (七) 继承性
2009/09/30 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
详解python中的json的基本使用方法
2016/12/21 Python
Python探索之Metaclass初步了解
2017/10/28 Python
Puppeteer使用示例详解
2019/06/20 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
python查看数据类型的方法
2019/10/12 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
SQL Server笔试题
2012/01/10 面试题
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
学院领导推荐信
2013/10/30 职场文书
总经理秘书的岗位职责
2013/12/27 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
竞聘书的秘诀
2019/04/02 职场文书