简易版网上订餐，包括从后台添加菜品图片，菜品，价格
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
width: 600px;
height: 400px;
border: 2px solid black;
margin: 50px auto;
text-align: center;
position: relative;
}
.myPhp{
height: 140px;
margin-top: 150px;
width: 800px;
}
#order, #show {
text-align: left;
}
#show {
border: 2px solid black;
width: 600px;
margin-top: 150px;
}
#show div, form div {
height: 50px;
}
#show div span:nth-of-type(1), form div span:nth-of-type(1), #show div span:nth-of-type(2), form div span:nth-of-type(2) {
display: inline-block;
width: 140px;
}
img {
width: 40px;
vertical-align: middle;
margin: 0 8px;
}
#btn1, #btn2 {
width: 50px;
font-size: 16px;
background: #F5F5F5;
}
#btn2 {
margin-left: 8pxs;
}
#btn1 {
position: absolute;
bottom: 10px;
right: 20px;
}
</style>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<body>
<!--前台界面-->
<div class="myHtml box">
<h1>丽德国际大酒店</h1>
<form id="order" action="" method="post" enctype="multipart/form-data">
<input type="button" id="btn1" name="submit1" value="提交"/>
</form>
</div>
<div id="show"></div>
<!--老板添加菜单-->
<!--
老板往后台添加菜单，到文件中，后台从文件中获取菜品，返回到前台，形成订单界面
用户通过点击勾选，前台将所选菜品和份数传到后台，后台经过计算，将结果反倒浅谈
-->
<div class="myPhp box">
<h2>添加菜单</h2>
图片：<input type="file" id="pic" name="pic" />
菜品：<input type="text" name="caipin" id="caipin" value="" />
价格：<input type="text" name="price" id="price" />元
<input type="button" id="btn2" name="submit2" value="提交"/>
</div>
</body>
<script type="text/javascript">
//老板添加菜
$('#btn2').click(function() {
var str = $('#caipin').val()+" "+$('#price').val();
var formDate = new FormData();
formDate.append("str",str);
formDate.append("pic",$('#pic')[0].files[0]);
$.ajax({
type:"post",
url:"writeDan.php",
async:true,
data: formDate,
processData: false,
contentType: false,
success: function() {},
});
})
//前台发送请求，获取菜单
$.ajax({
type:"get",
url:"dingDan.php?action=caidan",
async:true,
data: {},
dataType: "json",
success: function(data) {
createCai(data);
}
});
//创建前台点菜界面
function createCai(data) {
console.log(data)
for(var i = 0; i < data.length-1; i++) {
$("<div><img src="+data[i].split(' ')[0]+" ><span>菜品："+data[i].split(' ')[1]+"</span><span> 价格：￥"+data[i].split(' ')[2]+"元</span> 份数：<input type='text'><input type='checkbox'></div>").appendTo("#order");
}
}
//点击 点餐的时候 获取勾选菜品，所选份数
$("#btn1").click(function() {
var arrIndex = [];
var arrCount = [];
$('input:checkbox').each(function(index,obj) {
if($('input:checkbox')[index].checked == true) {
var count = parseInt($('input:text')[index].value);
arrIndex.push(index);
arrCount.push(count);
}
})
$.ajax({
type:"post",
url:"dingDan.php",
async:true,
data: {"index":arrIndex,"count":arrCount},
dataType: "json",
success: function(data) {
console.log(data)
$("<h3>您所选购：</h3>").appendTo('#show');
for(var i = 0; i<data.length-1;i++) {
$("<div><img src="+data[i].split(' ')[0]+" ><span>"+data[i].split(' ')[1]+"</span><span> 单价："+data[i].split(' ')[2]+"</span><span> 小计："+data[i].split(' ')[2]+"</span></div>").appendTo('#show');
}
$("<h4>总价："+data[data.length-1]+"</h4>").appendTo('#show');
}
});
})
</script>
</html>
PHP代码1 往后台上传图片，添加菜品和价格
<?php
if(!empty($_POST['str'])) {
$result = false;
if(!empty($_FILES['pic']['name'])){
$type = $_FILES['pic']['type'];
if($type == "image/jpeg" || $type == "image/png" || $type == "image/gif"){
$result = move_uploaded_file($_FILES['pic']['tmp_name'],$_FILES['pic']['name']);
}
}
if($result) {
$str = $_FILES['pic']['name']." ".$_POST['str']."\n";
$fp = fopen("dingDan.txt","a+");
fwrite($fp,$str);
fclose($fp);
}
}
?>
PHP代码2 从后台去数据
<?php
if(!empty($_GET['action'])) {
$fp = fopen("dingDan.txt","r");
$arr = array();
while(!feof($fp)) {
$arr[] = fgets($fp);
}
$arr1 = json_encode($arr);
echo $arr1;
fclose($fp);
}
if($_POST) {
$fp = fopen("dingDan.txt","r");
$arr = array();
while(!feof($fp)) {
$arr[] = fgets($fp);
}
fclose($fp);
$index = $_POST['index'];
$count = $_POST['count'];
$allTotal = 0;
$arr2 = array();
for($i=0;$i<count($index);$i++) {
$picture = explode(" ",$arr[$index[$i]])[0];
$caiPin = explode(" ",$arr[$index[$i]])[1];
$price = explode(" ",$arr[$index[$i]])[2];
$total = $price * $count[$i];
$arr2[] = $picture." ".$caiPin." ".$price." ".$total;
$allTotal += $total;
}
$arr2[] = $allTotal;
$num = json_encode($arr2);
echo $num;
}
?>
网友评论