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脚本中include文件出错解决方法
Nov 20 PHP
PHP 向右侧拉菜单实现代码,测试使用中
Nov 03 PHP
PHP生成UTF8文件的方法
May 15 PHP
分割GBK中文遭遇乱码的解决方法
Aug 09 PHP
php判断GIF图片是否为动画的方法
Sep 04 PHP
PHP常用技术文之文件操作和目录操作总结
Sep 27 PHP
PHP实现获取FLV文件的时间
Feb 10 PHP
8个PHP数组面试题
Jun 23 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
May 19 PHP
php+jQuery+Ajax简单实现页面异步刷新
Aug 08 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
Oct 21 PHP
php获取小程序码的实现代码(B类接口)
Jun 13 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 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
php实现搜索类封装示例
2016/03/31 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
用ADODB.Stream转换
2007/01/22 Javascript
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
原生小程序封装跑马灯效果
2020/10/21 Javascript
python编程实现归并排序
2017/04/14 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
Python while循环使用else语句代码实例
2020/02/07 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
什么是serialVersionUID
2016/03/04 面试题
采购部部长岗位职责
2014/02/06 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
教师研修随笔感言
2015/11/18 职场文书
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技
SQL Server中锁的用法
2022/05/20 SQL Server
Python加密与解密模块hashlib与hmac
2022/06/05 Python