php+ajax實(shí)現(xiàn)商品對(duì)比功能示例
本文實(shí)例講述了php+ajax實(shí)現(xiàn)商品對(duì)比功能。分享給大家供大家參考,具體如下:
商品對(duì)比調(diào)用的JS文件(包含了商品對(duì)比框浮動(dòng)JS):
/*浮動(dòng)窗口*/ (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'; }; })(); //添加顯示對(duì)比框 function addcompare(chk){ $('#goods-compare').fadeIn().show(); var count=$(".compare-box li").length; if (count>2)//這里可以修改對(duì)比的數(shù)據(jù)哦 { alert('產(chǎn)品比較最多選3種哦'); return; } $.ajax({ type: 'post', url: 'ajax.php', data: { 'action':'1', 'gid':chk.gid,//商品ID 'gname':chk.gname,//商品名稱 'gtype':chk.gtype//商品類別,類別不同時(shí)不能比較 }, cache: false, async: false, success: function(result) { if(result!='') { alert(result); }else{ var url='http://www.lusen.com/product-'+chk.gid+'.html';//設(shè)置商品的鏈接地址 $(".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(){//將對(duì)比的所有商品ID,賦值給#comids return $(this).attr('id'); }).get().join(",")); } } }); } //刪除對(duì)比產(chǎn)品 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(",")); } }); } //清空對(duì)比產(chǎn)品 function clearcompare() { $.ajax({ type: 'post', url: 'ajax.php', data: { 'action':'3' }, cache: false, success: function(result) { $(".compare-box").html(''); $("#comids").val(''); } }); } //顯示對(duì)比框 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(); } } }); } //點(diǎn)擊關(guān)閉對(duì)比框 $('.close-gc').click(function(){ $('#goods-compare').fadeOut().hide(); });
商品對(duì)比調(diào)用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 '對(duì)不起,您選擇的是不同類別的產(chǎn)品無(wú)法加入對(duì)比,請(qǐng)選擇同類產(chǎn)品或清空當(dāng)前對(duì)比欄再選擇。'; return; } }else { setcookie('gtype',$_POST['gtype']); } if(isset($_COOKIE['gid'])) { $arr_str = $_COOKIE['gid']; $arr=mb_unserialize($arr_str); if(count($arr)>2) {//商品比較數(shù)量 echo "商品比較最多選3種"; return; } foreach($arr as $val) { if($val[0]==$_POST['gid']) { echo "該商品已經(jīng)加入對(duì)比框"; 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; } } ?>
更多關(guān)于PHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《PHP+ajax技巧與應(yīng)用小結(jié)》、《PHP網(wǎng)絡(luò)編程技巧總結(jié)》、《PHP基本語(yǔ)法入門教程》、《php面向?qū)ο蟪绦蛟O(shè)計(jì)入門教程》、《php字符串(string)用法總結(jié)》、《php+mysql數(shù)據(jù)庫(kù)操作入門教程》及《php常見數(shù)據(jù)庫(kù)操作技巧匯總》
希望本文所述對(duì)大家PHP程序設(shè)計(jì)有所幫助。
相關(guān)文章
php cURL和Rolling cURL并發(fā)方式比較
在實(shí)際項(xiàng)目或者自己編寫小工具(比如新聞聚合,商品價(jià)格監(jiān)控,比價(jià))的過(guò)程中, 通常需要從第3方網(wǎng)站或者API接口獲取數(shù)據(jù), 在需要處理1個(gè)URL隊(duì)列時(shí), 為了提高性能, 可以采用cURL提供的curl_multi_*族函數(shù)實(shí)現(xiàn)簡(jiǎn)單的并發(fā)。2013-10-10php往mysql中批量插入數(shù)據(jù)實(shí)例教程
這篇文章主要給大家介紹了關(guān)于php往mysql中批量插入數(shù)據(jù)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧2018-12-12PHP中實(shí)現(xiàn)Bloom Filter算法
這篇文章主要介紹了PHP中實(shí)現(xiàn)Bloom Filter算法,本文直接給出實(shí)現(xiàn)代碼,代碼中給出詳細(xì)注釋,Bloom Filter算法介紹等內(nèi)容,需要的朋友可以參考下2015-03-03php學(xué)習(xí)筆記之字符串常見操作總結(jié)
這篇文章主要介紹了php學(xué)習(xí)筆記之字符串常見操作,結(jié)合實(shí)例形式總結(jié)分析了php字符串的定義、單引號(hào)與雙引號(hào)的用法以及常見字符串操作函數(shù)使用技巧,需要的朋友可以參考下2019-07-07比較簡(jiǎn)單的百度網(wǎng)盤文件直鏈PHP代碼
通過(guò)正則表達(dá)式獲取百度網(wǎng)盤的文件真實(shí)地址,來(lái)實(shí)現(xiàn)直鏈的效果2013-03-03centos7環(huán)境下swoole1.9的安裝與HttpServer的使用方法分析
這篇文章主要介紹了centos7環(huán)境下swoole1.9的安裝與HttpServer的使用方法,結(jié)合實(shí)例形式分析了centos7環(huán)境下swoole1.9的安裝、配置方法以及HttpServer的相關(guān)使用技巧,需要的朋友可以參考下2020-03-03PHP strip_tags()去除HTML、XML以及PHP的標(biāo)簽介紹
這篇文章主要介紹了PHP strip_tags()去除HTML、XML以及PHP的標(biāo)簽介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02php中count獲取多維數(shù)組長(zhǎng)度的方法
這篇文章主要介紹了php中count獲取多維數(shù)組長(zhǎng)度的方法,實(shí)例分析了數(shù)組的原理并總結(jié)了數(shù)組長(zhǎng)度計(jì)算的方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-11-11