php+ajax实现商品对比功能示例

本文实例讲述了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+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《PHP基本语法入门教程》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家PHP程序设计有所帮助。

时间: 2019-04-11

ajax提交数据到后台php接收(实现方法)

在网上看了很久,发现数据的利用ajax提交数据到后台其实很简单,但是很多讲解的并不清楚,对于初学者来说,很多真的是看着有点糊涂,拿来直接用,又想去了解怎么回事,其实利用ajax提交数据到后台是非常的简单的. $.ajax({ type: "POST", url: "register.php", data: "name=John&location=Boston", success: function(msg){ alert( "D

php采用ajax数据提交post与post常见方法总结

本文实例讲述了php采用ajax数据提交post与post常见方法.分享给大家供大家参考.具体方法如下: 在很多情况下我们使用ajax是不会有什么问题的,但有时会碰到ajax数据提交post不完整的问题,这里举例给大家分析一下. 下边是一个标准的ajax请求代码,正常情况下是不会有任何问题的,但是,在特定情况下就会出现问题,比如,username=fdas&321的时候,或者参数值中出现了&符号,经过了N多遍测试,发现数据都传输了,但是打印出来数据是半截,最后仔细观察头信息发现传输的头不对

PHP+ajax 无刷新删除数据

首先本例基于留言本整理版修改. 我们使用了jquery.js来实现ajax和dom删除 首先加入 复制代码 代码如下: <script type="text/javascript" src="lib/jquery.js"></script> 给table加个 复制代码 代码如下: id="t<!--{$item.id}-->" 写个js: 复制代码 代码如下: <script> function d

ajax调用返回php接口返回json数据的方法(必看篇)

php代码如下: <?php header('Content-Type: application/json'); header('Content-Type: text/html;charset=utf-8'); $email = $_GET['email']; $user = []; $conn = @mysql_connect("localhost","Test","123456") or die("Failed in conn

php+ajax+jquery实现点击加载更多内容

我们在一些微博网站上可以碰到这样的应用,微博内容列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文我将结合jQuery和PHP给大家讲述如何实现这种应用. 基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"更多"链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录

PHP中如何判断AJAX提交的数据

如果是ajax请求,以下表达式的值为真 $_SERVER["HTTP_X_REQUESTED_WITH"]=="XMLHttpRequest" 就是一个PHP的环境变量.

php+ajax实现无刷新动态加载数据技术

我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术应用得淋漓尽致. 滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实就是一个典型的Ajax应用.本文将使用jQuery,结合PHP,mysql以及JS

php+ajax实现带进度条的大数据排队导出思路以及源码

废话不多说,先上效果图: 点击导出,实现 点击导出 统计完成之后 点击确定 下面来谈谈实现的思路: 前面导出操作简单,从第二个导出操作开始: 点击"确定"调用exportCsv函数 复制代码 代码如下: <a class="on" href="javascript:exportCsv();"><em>导出</em></a> exportCvs函数如下function exportCsv(){ //清

php+ajax 实现输入读取数据库显示匹配信息

废话不多说了,直接跟大家贴代码了 dropbox_index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

Ajax+Asp源代码]读取数据库内容的表格(没有用框架)第1/2页

功能: 读取数据库内容的表格.读取数据方式为ajax,分页也是.代码写得不好.呵呵.供一些学习ajax的朋友参考参考.如有不妥请大家跟贴纠正.我会根据大家的提议不断修正代码. 目前还有一个小问题,如果有朋友有兴趣帮我解决一下在下不胜感激 你翻到最后一页的时候如果只有一行会出现空白和undefined.这个问题我试了很多方法一直没有很妥当的解决. 注:下面一些地方出现笑脸表情的是 大写的d 其实很多地方都可以根据asp文件中输出的字符来控制.目前还没有往那方面完善.比如说一列显示多少行等. Asp

读取数据库的数据并整合成3D饼图在jsp中显示详解

前言 本文主要给大家介绍的是关于读取数据库数据整合成3D饼图并在jsp中显示的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: 方法如下: 首先我将生成饼图的方法独立写成一个PieChar.java类,详细代码如下:(数据库需要自己建,如有需要的话) import java.io.IOException; import java.sql.SQLException; import org.jfree.chart.ChartFactory; import org.jfree.c

AJAX+JSP实现读取XML内容并按排列显示输出的方法示例

本文实例讲述了AJAX+JSP实现读取XML内容并按排列显示输出的方法.分享给大家供大家参考,具体如下: 实现功能:点击按扭,显示出JSP页面中通过out.println传过来的xml信息 一.含XML的JSP页面 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% response.setContentType("text/x

jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

本文使用jQuery,结合PHP和Mysql,通过实例讲解如何实现Ajax数据加载效果. HTML <div id="list"> <ul></ul> </div> <div id="pagecount"></div> 页面中,#list用来展示数据列表,包括本例要展示的商品图片和标题,#pagecount用来展示分页条,即本例中的上一页.下一页. 当然,别忘了,在head中预先载入jquery

使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

首先我们需要先建立好数据库,将一些数据插入进去 需要两张表: province:省份表 city: 城市表 如图: 然后再在java中建立相关的实体类与之对应 再然后,我们就能开始做jdbc的操作了 public class ConnectionFactory { private static String driver; private static String url; private static String user; private static String password;

ajax提交手机号去数据库验证并返回状态值

本文实例为大家分享了ajax提交手机号去数据库的具体代码,并返回状态值,供大家参考,具体内容如下 <script type="text/javascript"> $(function(){ $('.agree_regi').click(function(){ var phone = $.trim($("#phone").val()); if(phone == ""){ NewAlert(2,"请输入手机号",nul

使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

先给大家展示下运行效果图:  1.后台action产生json数据. List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate); int totalRows = blackList.size(); StringBuffer sb = new StringBuffer(); sb.append("{\"totalCount\":\""+to

JS输入用户名自动显示邮箱后缀列表的方法

本文实例讲述了JS输入用户名自动显示邮箱后缀列表的方法.分享给大家供大家参考.具体如下: 以下是代码,保存到html文件打开: 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>输入用户名自动显示邮箱后缀列表</title> <script type="text/javascript" src=&q

Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果(附demo源码下载)

本文实例讲述了Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果的方法.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Text; using System.IO; public partial