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 相关文章推荐
15种PHP Encoder的比较
Apr 17 PHP
PHP生成网页快照 不用COM不用扩展.
Feb 11 PHP
Php Image Resize图片大小调整的函数代码
Jan 17 PHP
PHP全概率运算函数(优化版) Webgame开发必备
Jul 04 PHP
php中3种方法统计字符串中每种字符的个数并排序
Aug 27 PHP
Thinkphp模板中截取字符串函数简介
Jun 17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
Jun 23 PHP
php实现用手机关闭计算机(电脑)的方法
Apr 22 PHP
PHP SOCKET编程详解
May 22 PHP
[原创]PHP字符串中插入子字符串方法总结
May 06 PHP
php实现单笔转账到支付宝功能
Oct 09 PHP
Laravel中正确地返回HTTP状态码方法示例
Sep 10 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
thinkphp循环结构用法实例
2014/11/24 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
JS数组的高级使用方法示例小结
2020/03/14 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
Python从零开始创建区块链
2018/03/06 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
python实现飞船大战
2020/04/24 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
python自动生成sql语句的脚本
2021/02/24 Python
.NET方向面试题
2014/11/20 面试题
秋季运动会活动方案
2014/02/05 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
初中学生操行评语
2014/12/26 职场文书
商务信函英语问候语
2015/11/10 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js