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 相关文章推荐
Windows下PHP的任意文件执行漏洞
Oct 09 PHP
php Mysql日期和时间函数集合
Nov 16 PHP
PHP 文件上传进度条的两种实现方法的代码
Nov 25 PHP
PHP编码规范的深入探讨
Jun 06 PHP
php CI框架插入一条或多条sql记录示例
Jul 29 PHP
php中的字符编码转换函数用法示例
Oct 20 PHP
php身份证号码检查类实例
Jun 18 PHP
php实现对象克隆的方法
Jun 20 PHP
Netbeans 8.2与PHP相关的新特性介绍
Oct 08 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
Jun 09 PHP
浅谈Laravel核心解读之Console内核
Dec 02 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
Jun 14 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
使用eAccelerator加密PHP程序
2008/10/03 PHP
PHP学习笔记之二 php入门知识
2011/01/12 PHP
php中文验证码实现示例分享
2014/01/12 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
PHP实现文件上传与下载
2020/08/28 PHP
网页自动跳转代码收集
2009/09/27 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
python保存文件方法小结
2018/07/27 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
中国网上药店领导者:1药网
2017/02/16 全球购物
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
群众路线教育实践活动总结
2014/10/30 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
Python time库的时间时钟处理
2021/05/02 Python