HTML页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box"></div>
<input type="button" name="btn" id="btn" value="提交" />
<div id="show"></div>
</body>
<script type="text/javascript">
var box = document.getElementsByClassName("box")[0];
var btn = document.getElementById("btn");
var show = document.getElementById("show");
window.onload=function(){
getDataStart(); //向后台获取展示在页面上的数据
}
function getDataStart(){ // 向后台获取展示在页面上的数据
var xhr = new XMLHttpRequest();
xhr.open("GET","form02.php?action=get",true);
xhr.send(null);
xhr.onload=function(){
var data = JSON.parse(xhr.responseText);
showData(data);
}
}
function showData(data){ // 将获取到的数据展示在页面山
var html = "";
for(var i in data ){
html +=${data[i][0]} ${data[i][1]} <input type="text" class="text" name="amount[]" value=""/> <input type="checkbox" name="menu[]" class="menu" value=${i} /><br>;
}
box.innerHTML = html;
btn = document.getElementById("btn");
}
//点击提交向后台发送数据
btn.onclick=function(){
var arr = getData(); // 执行获取用户输入的数据
var formData = new FormData();
formData.append("menu",arr[0]);
formData.append("amount",arr[1]);
var xhr = new XMLHttpRequest();
xhr.open("POST","form02.php",true);
xhr.send(formData);
xhr.onload=function(){
var data = JSON.parse(xhr.responseText);
showPrice(data); //将从后台获取到的数据展示到页面
}
}
//获取用户输入的数据 并存放到数组里面；
function getData(){
var arr = [];
var menu = document.getElementsByClassName("menu");
var texts = document.getElementsByClassName("text");
var arrCheck = [];
var arrText = [];
var num = 0;
for(var i=0;i<menu.length;i++){
if(menu[i].checked){ // 只记录选中的
arrCheck[num] = menu[i].value;
arrText[num] = texts[i].value;
num++;
}
}
arr = [arrCheck,arrText]
return arr;
}
//将从后台获取到的数据展示到页面
function showPrice(data){
var showHTML = '';
for(var i in data.foodAmount){
showHTML +=菜名: ${data.foodName[i]} 数量: ${data.foodAmount[i]} 单价: ${data.univalence[i]} 小计: ${data.price[i]}<br>;
}
showHTML+= data.allPrice;
show.innerHTML = "总价："+ showHTML;
}
</script>
</html>
PHP页面
$menu = array(
array("红烧肉","38"),
array("烤鸡","38"),
array("鲍鱼","38"),
array("熊掌","38"),
array("胖虎","38")
);
if(!empty($_GET["action"])){
echo json_encode($menu); // 返回前台渲染页面的数据
}
// 如何接受多选变量
if(!empty($_POST)){
//保存 菜品的数组
$foodArr = explode(",",$_POST["menu"]);
//保存数量的函数
$amountArr = explode(",",$_POST["amount"]);
$allPrice = 0;
$array = array(); // 定义一个数组保存 菜名 单价 数量 小计 总价
foreach($foodArr as $key => $val){
//菜名
$foodName = $menu[$val][0];
$array["foodName"][] = $foodName;
//单价
$univalence = $menu[$val][1];
$array["univalence"][] = $univalence;
//数量
$array["foodAmount"][] = $amountArr[$key];
$foodAmount = $amountArr[$key];
//计算总价
$price = $univalence * $foodAmount;
$array["price"][] = $price;
$allPrice += $price;
//执行 写入到指定文件的函数
recorderMenu($foodName,$univalence,$foodAmount,$price);
}
$array["allPrice"] = $allPrice;
echo json_encode($array); // 返回数据给前台
//写入总价
recorderAllPrice($allPrice);
}
//逐类写入 菜名 数量 总价
function recorderMenu($menuName,$univalence,$amount,$price){
$line = "您选择的是 $menuName 单价 $univalence 元 $amount 份 共计 $price 元"."\n";
$pf = fopen("form02text.txt","a+");
fwrite($pf,$line);
fclose($pf);
return $line;
}
function recorderAllPrice($allPrice){
$pf = fopen("form02text.txt","a+");
fwrite($pf,"总价".$allPrice."元"."\n");
fclose($pf);
}
?>
