AJAX无刷新加购物车
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX无刷新加购物车相关的知识，希望对你有一定的参考价值。
<?php
namespace Home\Controller;
use Think\Controller;
class ShoppingcartController extends Controller {
public function shoppingcart(){
if(IS_AJAX){
if(!$_SESSION[‘userid‘]){
$this->error(‘请先登录‘,U(‘‘));
}else{
$vid=$_SESSION[‘userid‘];
$pid=$_POST[‘productid‘];
$data[‘user_id‘]=$_SESSION[‘userid‘];
$data[‘time‘]=time();
$product=M(‘products‘)->where(‘id="‘.$_POST[‘productid‘].‘"‘)->select();
$data[‘product-name‘]=$product[0][‘title‘];
$data[‘number‘]=$_POST[‘num‘];
$data[‘unit-price‘]=$product[0][‘present‘];
$data[‘color‘]=$_POST[‘color‘];
$data[‘size‘]=$_POST[‘size‘];
$data[‘img‘]=$product[0][‘image1‘];
$result=M(‘shopping_cart‘)->where("user_id=‘$vid‘ and pid=".$pid)->find();
if($result){
$data[‘num‘]=$result[‘num‘]+$data[‘num‘];
$result=M(‘shopping_cart‘)->where("user_id=‘$vid‘ and pid=".$pid)->save($data);
}else{
$result=M(‘shopping_cart‘)->add($data);
}
if($result){
echo 1;
}else{
echo 0;
}
}
}else{
$this->display();
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="__PA__css/bootstrap.css" />
<link rel="stylesheet" href="__PA__css/product_center.css" />
<title></title>
</head>
<body>
<!--header-->
<div class="header">
<div class="header_top">
<div class="container">
<ul style="display: -webkit-inline-box;" class="nav nav-pills">
<?php if (!empty($_SESSION[‘userid‘])): ?>
<span style="color:#fff;">会员:</span>
<a href="{:U(‘Home/Membercenter/membercenter‘)}">{$_SESSION[‘userid‘][‘nick‘]}</a><a href="{:U(‘Login/out‘)}">退出</a>
<?php else: ?>
<li><a href="{:U(‘Home/Login/login‘)}">登陆</a></li>
<li><a href="{:U(‘Home/Registration/registration‘)}">免费注册</a></li>
<?php endif ?>
</ul>
</div>
</div>
</div>
<!--header end-->
<!--content-->
<div class="content">
<div class="container">
<div class="logo">
<a href="index.html"><img src="__PA__img/logo_02.png" alt="logo_02" class="img-responsive" /></a>
</div>
<div class="sm_nav navbar-header">
<button type="button" class="btn navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="icon-style"></span>
<span class="icon-style"></span>
<span class="icon-style"></span>
</button>
</div>
<div class="nav_first collapse navbar-collapse" id="example-navbar-collapse">
<div class="nav_logo"><a href="index.html"><img src="__PA__img/logo_02.png" alt="logo_02" class="img-responsive" /></a></div>
<ul class="nav navbar-nav">
<li><a href="{:U(‘Home/Index/index‘)}">首页</a></li>
<li><a href="{:U(‘Home/About/about‘)}">品牌介绍</a></li>
<li><a href="{:U(‘Home/News/news‘)}">新闻中心</a></li>
<li><a class="default" href="{:U(‘Home/Products/products‘)}">产品中心</a></li>
<li><a href="{:U(‘Home/Contact/contact‘)}">联系我们</a></li>
<li><a href="{:U(‘Home/Membercenter/membercenter‘)}">个人中心</a></li>
</ul>
</div>
<div class="place">
<form method="post" action="{:U(‘productscenter‘)}">
<p>当前位置</p>
<img src="__PA__img/icon_place_02.png" alt="icon_place_02" />
<p><a href="{:U(‘Home/Products/products‘)}">产品中心</a></p>
</div>
<div class="center_show">
<div class="row">
<div class="col-md-2 col-xs-12">
<div class="subnav">
<input type="hidden" value="{$sdf[‘id‘]}" name="id"/>
<ul>
<volist name="pcs" id="per" >
<li <?php if ($per[‘cid‘]==$cid){ echo ‘class="default_styel"‘;}?>><a href="{:U(‘Home/products/products/cid/‘.$per[‘cid‘])}">{$per[‘name‘]}</a></li>
</volist>
</ul>
</div>
<div class="xs_nav input-group">
<span class="input-group-btn dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">服装类型</button>
<ul class="dropdown-menu" role="menu">
<volist name="pcs" id="per" >
<li <?php if ($per[‘cid‘]==$cid){ echo ‘class="default_styel"‘;}?>><a href="{:U(‘Home/products/products/cid/‘.$per[‘cid‘])}">{$per[‘name‘]}</a></li>
</volist>
</ul>
</span>
</div>
</div>
<div class="col-md-10 col-sm-12 col-xs-12">
<div class="product_show">
<div class="show_top">
<div class="show_img">
<img style="width:232px; height:320px; " src="__PP__{$sdf[‘image1‘]}" alt="product_pic_04" />
</div>
<div class="show_text">
<h4>{$sdf[‘title‘]}</h4>
<div class="price">
<p>价格 ￥ <strike>{$sdf[‘original‘]}</strike></p>
<input type="hidden" value="{$sdf[‘original‘]}" name="price"/>
<span>
<i>1342</i><br />
交易成功
</span>
<h2><i>￥</i> {$sdf[‘present‘]}</h2>
</div>
<p class="place_message ">
<i>尺码</i>
<volist name="si" id="ze" >
<span class="size" onClick="size({$ze[‘id‘]})" name="{$ze[‘id‘]}">{$ze[‘size‘]}</span>
</volist>
</p>
<p class="place_message">
<i>颜色</i>
<volist name="pq" id="ca">
<span class="color" onClick="color({$ca[‘id‘]})" name="{$ca[‘id‘]}">{$ca[‘color‘]}</span>
</volist>
</p>
<p>
<i>数量</i>
<input type="text" value="1" name="num" id="num"/>
</p>
<a style="margin-left: 125px; margin-top: 20px;" class="shopping" href="javascript:void(0)" onClick="add_cart({$sdf[‘id‘]})">立即购买</a>
<a style="margin-top: 20px;" class="shopping" href="javascript:void(0)" onClick="add_cart({$sdf[‘id‘]})">加入购物车</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
<script type="text/javascript" src="__PA__js/jquery-1.11.0.js"></script>
<script>
$(document).ready(function(){
$(‘.image ul li‘).children(‘img‘).css(‘border‘,‘1px solid transparent‘);
$(‘.image ul li‘).eq(0).children(‘img‘).css(‘border‘,‘1px solid #999‘);
$(‘.image ul li‘).click(function(){
$(this).children(‘img‘).css(‘border‘,‘1px solid #999‘).parent().siblings().children(‘img‘).css(‘border‘,‘1px solid transparent‘);
})
})
</script>
<script>
</script>
<script type="text/javascript" src="__PA__js/bootstrap.js"></script>
<script type="text/javascript" src="__PA__js/nav_logo.js"></script>
</html>
<script>
function color(colorid){//自定义点击事件onClick="size({$ze[‘id‘]})"
c_id=colorid;
}
function size(sizeid){//自定义点击事件onClick="color({$ca[‘id‘]})"
s_id=sizeid;
}
function add_cart(productid){//自定义点击事件onClick="add_cart({$sdf[‘id‘]})"
if(typeof c_id=="undefined"){//判断是否选择颜色
alert(‘请选择产品颜色‘);
}
if(typeof s_id=="undefined"){//判断是否选择尺寸
alert(‘请选择产品尺寸‘);
}
var url="{:U(‘Shoppingcart/shoppingcart‘)}";//跳转到后台的某个方法
var num=$("#num").val();//抓取数量
var data=‘productid=‘+productid+‘&num=‘+num+‘&color=‘+c_id+‘&size=‘+s_id;//把所有数据传往后台
var success=function(dat){
if(dat==8){
alert(‘请先登录!‘);window.location.href="{:U(‘Login/index‘)}";
}else if(dat==1){
alert(‘添加购物车成功!‘);
}else if(dat==0){
alert(‘添加购物车失败!‘);
}else{
alert(‘请先登录‘);window.location.href="{:U(‘Login/login‘)}";
}
}
$.post(url,data,success);//执行成功回调函数
}
</script>
<script>
以上是关于AJAX无刷新加购物车的主要内容，如果未能解决你的问题，请参考以下文章
我想在购物车中添加产品而不用 AJAX 和 Django 刷新页面