通过提交数据，使用php来出里购物车商品的价钱计算。实现方式：php数组遍历。
总的过程就是：
1）表单基本功能（数据可加减）；
2）表单数据的处理，遍历三个数据，获取字符串；
3）在php中将字符串转化成数组，才能计算，
/************************************第一步：前台数据的处理
在<body>中创建一个商品基本信息：
<form method="post" action="?act=going" id="forms">
<p>
<input type="text" name="commidity" value="com_1" class="commidity"> <!--商品id编号-->
<input type="text" value="399.0" name="prices" readonly> <!--商品价格-->
<a href="javascript:void(0);" class="adds">+</a>
<input type="text" name="numbers" value="1" readonly> <!--商品数量：在js里实现+—....-->
<a href="javascript:void(0);" class="subs">-</a>
</p>
<pre name="code" class="html"> <p>
<input type="text" name="commidity" value="com_2" class="commidity">
<input type="text" value="499.0" name="prices" readonly>
<a href="javascript:void(0);" class="adds">+</a>
<input type="text" name="numbers" value="1" readonly>
<a href="javascript:void(0);" class="subs">-</a>
</p>
<p>
<input type="text" name="commidity" value="com_3" class="commidity">
<input type="text" value="599.0" name="prices" readonly>
<a href="javascript:void(0);" class="adds">+</a>
<input type="text" name="numbers" value="1" readonly>
<a href="javascript:void(0);" class="subs">-</a>
</p>
<a href="javascript:void(0);" id="subbtn">商品总价</a> //这里一定要设置一个提交的按钮，也可以设置成button的形式
</p>
</form>
针对数量部分，在jq对象里实现加减：
<scrtipt>
$(function(){
//实现数量可加可减
$("a[class='adds']").click(function(){
var val_1 = $(this).next("input").val();
$(this).next("input").val(parseInt(val_1)+1);
});
$("a[class='subs']").click(function(){
var val_2 = $(this).prev("input").val();
//加一个判断，避免数量出现负数
if(val_2 > 1){
$(this).prev("input").val(pareseInt(val_2)-1);
}
});
//提交表单处理数据步骤
$("#subbtn").click(function(){
var price_val = ""; //设置一个空的变量，用于存放字符串
var num_val = "";
var com_val = "";
//分别遍历每个商品的单价，数量和id，将这些数据转化成字符串的形式
$("input[name='prices']").each(function(){
if(price_val == "") price_val = $(this).val();
else price_val += "," +$(this).val();
});
$("input[name='numbers']").each(function(){
if(num_val == "") num_val = $(this).val();
else num_val += "," +$(this).val();
});
$("input[name='commidity']").each(function(){
if(com_val == "") com_val = $(this).val();
else com_val += "," +$(this).val();
});
});
});
</script>获得的三组字符串要传给php来处理，这里就需要一个桥接：
在form表单里添加三个隐藏的Input来存储这些值，这样当表单提交后，就可以在php中获取这些字符串，再做相应的处理。
在刚才的<form>中添加隐藏的input,这样数据就不会呈现给用户，只有后台知道啦：
<input type="hidden" name="price_val"> <!--这里的name命名要同上面jq中的三个字符串var的名字相同，才能成功读取到他们的值-->
<input type="hidden" name="num_val">
<input type="hidden" name="com_val">要使这些隐藏的input有值，必须接着刚才的Jq在后面添加:
$("input[name='price_val']").val(price_val);
$("input[name='num_val']").val(num_val);
$("input[name='com_val']").val(com_val);
前台值的处理就差不多了，最后一定要记得将整个表单提交：
$("#forms").submit();
/**********************************************第二部：后台数据的处理
接下来就是php的工作啦,要记得get 是获取表单数据，post是传送数据：
$($_GET['act']=="going"){ //这里建议不要有空格，反正我空格的时候出错了
//首先就是获取之前处理好的值，然后将其转化成数组，才能一次运算
$price_val = explode("," ,$_POST['price_val']);
$num_val = explode("," ,$_POST['num_val']);
$com_val = explode("," ,$_POST['com_val']);
//这三组数组的长度要相等，不然无法计算：
if(count($price_val)!=count($num_val) || count($num_val)!=count($com_val)){
die("<script>alert('暂时无法操作');</script>");
}
$sum =0;
if($i=0; $i<count($com_val); $i++){
$com_num = intval($num_val[$i]);
if($com_num <= 0 || empty($com_num))
$com_num = 1; //如果有非法数据，则统一转化为1；
$sum += floatval($price_val[$i] * $com_num); //注意类型的转化，因为价格有小数，所以是浮点型
}
var_dump($sum);
die();
}
然后就可以运行了，总的代码如下:
<?php
/**
* Created by PhpStorm.
* User: hp
* Date: 2016/9/1
* Time: 10:50
* 购物车
*/
if($_GET['act']=="going"){
$price_val = explode(",",$_POST['price_val']); //转化为数组
$number_val = explode(",",$_POST['number_val']);
$com_val = explode(",",$_POST['com_val']);
if(count($price_val)!=count($number_val) || count($number_val)!=count($com_val)){
die("<script>alert('提示:暂时无法操作！');</script>"); //如果其中若有为0，则不能计算
}
$sum = 0;
for($i=0;$i<count($com_val);$i++){ //从商品Id开始遍历
$com_num=intval($number_val[$i]);//统计商品数量,数量转化为整型
if($com_num <=0 || empty($com_num))
$com_num=1; //设置有非法数量则统一转化为1
$sum += floatval($price_val[$i]) * $com_num;
}
var_dump($sum);
die();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
$("a[class='adds']").click(function(){
var ss = $(this).next("input").val(); //next()的用法
$(this).next("input").val(parseInt(ss) + 1);
});
$("a[class='subs']").click(function(){
var yy = $(this).prev("input").val(); //prev上一级
if(yy > 1){
$(this).prev("input").val(parseInt(yy) - 1);
}
});
$("#subbtn").click(function(){
//获取数量组合成一个字符串
var price_val = ""; //价格
var number_val = "";//数量
var com_val = ""; //商品id
$("input[name='prices']").each(function(){
if(price_val == "")
price_val = $(this).val(); //判断是否为0，若为0则返回本身
else
price_val += ","+$(this).val();
});
$("input[name='numbers']").each(function(){
if(number_val == "")
number_val = $(this).val();
else
number_val += ","+$(this).val();
});
$("input[name='commidity']").each(function(){
if(com_val == "")
com_val = $(this).val();
else
com_val += "," + $(this).val();
});
$("input[name='price_val']").val(price_val);
$("input[name='number_val']").val(number_val);
$("input[name='com_val']").val(com_val);
$("#forms").submit(); //如果没有提交按钮而是a标签一定要有这句
});
});
</script>
<style>
a{text-decoration: none;}
</style>
</head>
<body>
<form method="post" action="?act=going" id="forms">
<input type="hidden" name="price_val"> <!--这里也必须要有隐藏参数的设置-->
<input type="hidden" name="number_val">
<input type="hidden" name="com_val">
<p>
<input type="hidden" name="commidity" value="1" class="commidity"> //商品的id 要隐藏
<input type="text" value="399.0" name="prices" readonly>
<a href="javascript:void(0);" class="adds">+</a>
<input type="text" value="1" name="numbers" readonly>
<a href="javascript:void(0);" class="subs">-</a>
</p>
<p>
<input type="hidden" name="commidity" value="2" class="commidity">
<input type="text" value="499.0" name="prices" readonly>
<a href="javascript:void(0);" class="adds">+</a>
<input type="text" value="1" name="numbers" readonly>
<a href="javascript:void(0);" class="subs">-</a>
</p>
<p>
<input type="hidden" name="commidity" value="3" class="commidity">
<input type="text" value="599.0" name="prices" readonly>
<a href="javascript:void(0);" class="adds">+</a>
<input type="text" value="1" name="numbers" readonly>
<a href="javascript:void(0);" class="subs">-</a>
</p>
<p>
<a href="javascript:void(0);" id="subbtn">商品总价</a>
</p>
<!-- <input type="text" name="sum" readonly value="--><?php //var_dump($sum);?><!--">-->
</form>
</body>
</html>运行方式是在虚拟目录上运行的：localhost/.......
版权声明：本文为yuanqishaonv原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。