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入门速成(2)
Oct 09 PHP
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
Dec 16 PHP
实用函数5
Nov 08 PHP
ajax在joomla中的原生态应用代码
Jul 19 PHP
php自动给文章加关键词链接的函数代码
Nov 29 PHP
利用中国天气预报接口实现简单天气预报
Jan 20 PHP
php堆排序实现原理与应用方法
Jan 03 PHP
PHP中Closure类的使用方法及详解
Oct 09 PHP
PHP结合Jquery和ajax实现瀑布流特效
Jan 07 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
Feb 20 PHP
php分页查询mysql结果的base64处理方法示例
May 18 PHP
PHP异常处理定义与使用方法分析
Jul 25 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
文件上传类
2006/10/09 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
JavaScript Array扩展实现代码
2009/10/14 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
web.py中调用文件夹内模板的方法
2014/08/26 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
利用python画出AUC曲线的实例
2020/02/28 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
财务管理专业毕业生求职信范文
2013/09/21 职场文书
社团文化节邀请函
2014/01/10 职场文书
四查四看剖析材料
2014/02/14 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
销售个人求职信范文
2014/04/28 职场文书
旅游文化节策划方案
2014/06/06 职场文书
班级文化标语
2014/06/23 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
银行竞聘报告范文
2014/11/06 职场文书
初三毕业评语
2014/12/26 职场文书
感恩教育观后感
2015/06/17 职场文书
2016党校培训心得体会
2016/01/07 职场文书
为什么RedisCluster设计成16384个槽
2021/09/25 Redis
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python