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 相关文章推荐
某大型网络公司应聘时的笔试题目附答案
Mar 27 PHP
php 多个submit提交表单 处理方法
Jul 07 PHP
PHP简洁函数小结
Aug 12 PHP
yii的CURD操作实例详解
Dec 04 PHP
推荐10个提供免费PHP脚本下载的网站
Dec 31 PHP
Session 失效的原因汇总及解决丢失办法
Sep 30 PHP
Zend Framework实现多服务器共享SESSION数据的方法
Mar 22 PHP
深入理解PHP中的count函数
May 31 PHP
PHP对称加密函数实现数据的加密解密
Oct 27 PHP
ThinkPHP中create()方法自动验证实例
Apr 26 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
Jun 30 PHP
Yii框架通过请求组件处理get,post请求的方法分析
Sep 03 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批量删除jQuery操作
2017/07/23 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
js资料toString 方法
2007/03/13 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
了解重排与重绘
2019/05/29 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
python cs架构实现简单文件传输
2020/03/20 Python
Python语言快速上手学习方法
2018/12/14 Python
Python jieba库用法及实例解析
2019/11/04 Python
Tensorflow累加的实现案例
2020/02/05 Python
python实现扫雷小游戏
2020/04/24 Python
django 模型中的计算字段实例
2020/05/19 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
《要下雨了》教学反思
2014/02/17 职场文书
销售2014年度工作总结
2014/12/08 职场文书
党支部先进事迹材料
2014/12/24 职场文书
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers