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 相关文章推荐
一个阿拉伯数字转中文数字的函数
Oct 09 PHP
php str_pad 函数使用详解
Jan 13 PHP
PHP提取数据库内容中的图片地址并循环输出
Mar 21 PHP
php header示例代码(推荐)
Sep 08 PHP
fleaphp crud操作之find函数的使用方法
Apr 23 PHP
PHP高级对象构建 工厂模式的使用
Feb 05 PHP
phpstorm编辑器乱码问题解决
Dec 01 PHP
PHP原生函数一定好吗?
Dec 08 PHP
php图片水印添加、压缩、剪切的封装类实现
Apr 18 PHP
Yii视图操作之自定义分页实现方法
Jul 14 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
Sep 04 PHP
PHP与Web页面的交互示例详解一
Aug 04 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支持页面回退的两种方法
2008/01/10 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
常用PHP框架功能对照表
2014/10/23 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
js 文件引入实现代码
2010/04/23 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
vue.js表格分页示例
2016/10/18 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
js面向对象方式实现拖拽效果
2021/03/03 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
python使用正则表达式提取网页URL的方法
2015/05/26 Python
python发送邮件功能实现代码
2016/07/15 Python
python 简单的多线程链接实现代码
2016/08/28 Python
聊聊Python中的pypy
2018/01/12 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
外贸实习生自荐信范文
2013/11/24 职场文书
幼师求职信
2014/06/23 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
工作作风建设心得体会
2014/10/22 职场文书
python urllib库的使用详解
2021/04/13 Python
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
python多次执行绘制条形图
2022/04/20 Python