搜索菜单
当前位置: 首页 > PHP > PHP实现商品对比功能代码分享

PHP实现商品对比功能代码分享

咖啡半糖
咖啡半糖
发布时间：2026-10-13 | 4人浏览过
原创

本文详细解析如何利用 PHP 结合前端 JavaScript (jQuery) 构建一个轻量级的商品对比模块。核心思路是将用户选中的商品信息序列化为数组，并通过 Cookie 持久化存储于客户端，同时利用 AJAX 技术在不刷新页面的前提下完成数据的动态增删查改。

准备条件与接口设计

本实现分为两个主要部分：负责页面交互与数据请求的 .js 文件，以及处理逻辑与数据存储的 ajax.php 文件。以下是所需的核心环境：

  • 依赖库：jQuery（用于 DOM 操作与 AJAX 请求）。
  • 存储介质：浏览器端 Cookie（由于未提及数据库或服务器存储，数据以明文序列化形式暂存于 Cookie 中）。
  • 后端逻辑：PHP，需开启 Cookie 读写权限。

在 ajax.php 中定义了四个操作动作（action参数），分别为：

  1. 1：添加商品至对比框。
  2. 2：从对比框中删除指定商品。
  3. 3：清空所有对比商品。
  4. 4：获取并渲染已存在对比框的商品内容。

第1步：编写 Ajax 交互后端 (ajax.php)

此步骤的目的主要是确保前后端能够正确传递并存储序列化后的商品数组。请注意，文中提供的示例代码直接使用了域名 http://www.lusen.com 作为链接前缀，实际部署时需将其替换为您的真实业务域名。

<?php 
// 自定义反序列化函数，防止 stripslashes 干扰
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']);
  }
  
  // 处理已有的商品ID数组
  if(isset($_COOKIE['gid'])) {
    $arr_str = $_COOKIE['gid'];
    $arr=mb_unserialize($arr_str);
    
    // 限制最大对比数量为3
    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;
  }else {
    // 第一次添加
    $info=array($_POST['gid'],$_POST['gname'],$_POST['gtype']);
    $arr=$info;
  }
  
  // 序列化并保存Cookie
  $arr_str=serialize($arr);
  setcookie('gid',$arr_str);
}else if($_POST['action']=='2') {//delone - 删除单个
  $id=$_POST['gid'];
  if(isset($_COOKIE['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 - 返回HTML片段供前端渲染
  if(isset($_COOKIE['gid'])) {
    $data='';
    $arr_str = $_COOKIE['gid'];
    $arr=mb_unserialize($arr_str);  
    foreach ($arr as $val){      
      // 注意：此处URL前缀需根据实际项目修改
      $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;
  }   
}
?>

第2步：配置前端浮动窗口逻辑

前端 JS 需要实现浮动窗口的跟随滚动定位。以下代码会查找 ID 为 goods-compare 的元素，并根据页面滚动位置调整其 `top` 值。

(function(){   
  var n=10; // 距离顶部的偏移像素
  var obj=document.getElementById("goods-compare"); 
  if(!obj){ 
    return false; 
  } 
  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'; 
  };   
})();

第3步：完善添加、删除与展示控制

此阶段包含核心的增删逻辑。前端将商品 ID (gid)、名称 (gname) 和类型 (gtype) 发送至 ajax.php，并根据返回值更新 DOM 或弹出提示。

添加商品至对比栏

调用 addcompare(obj)，此时 chk 对象应包含 gid, gname, gtype。若当前已有超过 2 个商品（即达到上限3个），则拦截请求。

function addcompare(chk){ 
  $('#goods-compare').fadeIn().show(); 
  // 限制数量为3 (大于2表示已有3个)
  if($(".compare-box li").length >2){ 
    alert('产品比较最多选3种哦'); 
    return; 
  } 
  $.ajax({ 
    type: 'post', 
    url: 'ajax.php', 
    data: { 
      'action':'1', 
      'gid':chk.gid,
      'gname':chk.gname,
      'gtype':chk.gtype 
    }, 
    success: function(result) { 
      if(result!=''){ 
        // 后端报错（如超出数量、类型不一致等）
        alert(result); 
      }else{ 
        // 成功：手动追加DOM元素
        var url='YOUR_DOMAIN/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>") 
        syncComids();
      }
    } 
  }); 
}

同步隐藏域中的数据

为了保持界面与后台存储的一致性，建议在每次增删后执行 syncComids() 函数（草稿中整合在 AJAX success 回调内，这里抽离以便复用）：

function syncComids() {
  $("#comids").val($(".compare-box li").map(function(){
    return $(this).attr('id');
  }).get().join(","));
}

移除与清空商品

点击“删除”或“清空”时，同样向后端发送指令，成功后再销毁 DOM 节点。

// 删除对比产品
function removecompare(id) {
  $.ajax({ 
    type: 'post', 
    url: 'ajax.php', 
    data: { 'action':'2', 'gid':id }, 
    success: function(result) { 
      $("#"+id).remove(); 
      syncComids();
    } 
  });
}

// 清空对比产品
function clearcompare() {   
  $.ajax({ 
    type: 'post', 
    url: 'ajax.php', 
    data: { 'action':'3' }, 
    success: function(result) { 
      $(".compare-box").html(''); 
      syncComids();
    } 
  });
}

// 显示对比框（初始化或刷新时加载）
function showcompare() {
  $.ajax({ 
    type: 'post', 
    url: 'ajax.php', 
    data: { 'action':'4' }, 
    success: function(result) { 
      if(result){
        $(".compare-box").append(result);
        syncComids();
        $('#goods-compare').fadeIn().show();
      } 
    } 
  });
}

$('.close-gc').click(function(){ 
  $('#goods-compare').fadeOut().hide();
});

排错与注意事项

  • Cookie 有效期：示例中未设置 setcookie() 的第三个参数（过期时间）。这意味着当用户关闭浏览器后，对比数据会自动丢失。如需长期保留，建议设置为较长时间的有效期（如一周）。
  • 特殊字符转义：在后端序列化时，商品名称若包含中文或引号等特殊符号，直接使用拼接方式渲染 HTML 可能导致前端 JS 语法错误（如 onclick="..." 内部未正确转义）。生产环境中建议使用 JSON 格式传输数据，避免直接拼接 HTML 字符串。
  • 链接前缀：务必修改代码中写死的 http://www.lusen.com，否则点击对比项将无法访问您的网站页面。

以上就是关于 PHP 实现简易商品对比功能的详细内容，更多关于 Ajax 异步交互与 PHP 数据处理技巧的资料请关注本站其它相关文章！

相关文章

相关标签: PHP JavaScript Ajax

本站声明

本文内容仅供参考，不代表本站观点。转载或引用请注明出处。如发现内容问题，请通过联系我们页面反馈。

作者最新文章

全部内容

Python 相关产品和应用

全部下载
Python Selenium
Selenium

Selenium

4.51.0 · Windows

用于浏览器自动化和 Web 测试的 Python 工具。
Python 机器学习
scikit-learn

scikit-learn

1.9.1 · Windows

常用 Python 机器学习算法与模型评估工具库。
Python 代码质量
Black

Black

26.10.1 · Windows

强调一致性的 Python 自动代码格式化工具。
Python 代码质量
Ruff

Ruff

0.17.1 · macOS

由 Rust 编写的高速 Python 代码检查和格式化工具。
Python pytest
pytest

pytest

9.1.1 · Windows

简洁而强大的 Python 自动化测试框架。
Python FastAPI API
FastAPI

FastAPI

0.146.0 · Windows

高性能 Python API 框架，支持类型提示和自动接口文档。
Python Flask Web开发
Flask

Flask

3.1.3 · Windows

轻量灵活的 Python Web 应用框架。
Python Django Web开发
Django

Django

6.1.2 · Windows

成熟的 Python Web 框架，适合构建内容站点和业务系统。
Python Spyder
Spyder

Spyder

6.1.7 · Windows

面向科学计算与数据分析的 Python 集成开发环境。
Python SciPy
SciPy

SciPy

1.18.1 · Windows

面向科学、工程和技术计算的 Python 算法库。
Python Pandas 数据分析
pandas

pandas

3.0.6 · Windows

Python 数据分析库，提供 DataFrame 与丰富的数据处理能力。
Python NumPy
NumPy

NumPy

2.5.4 · Windows

Python 科学计算基础库，提供高性能多维数组与数值运算。

文章分类

专题列表

ipython.cn 学习网
人工智能 Java AI行业服务