简单的ajax+php模拟点菜 并在后台记录


html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<style>
		.header{
			width:80%;
			height:80px;
			min-width: 505px;
			margin:0 auto;
			text-align: center;
		}
		.header input{
			height: 60px;
			width: 400px;
			border: 1px solid #ccc;
			box-sizing: border-box;
			vertical-align: middle;
			outline: none;
			text-indent: 30px;
			font-size: 20px;
		}
		.header button{
			background-color: gold;
			width: 100px;
			height: 60px;
			line-height: 60px;
			color: #FFF;
			border: 1px solid #ccc;
			vertical-align: middle;
			outline: none;
		}
		.list{
			width: 80%;
			min-height: 505px;
			background-color: beige;
			margin:0 auto;
		}
		.list span{
			display: inline-block;
			background-color: aquamarine;
			color: #333;
			padding:10px 20px;
			border-radius:5px;
			margin: 20px;
			cursor: pointer;
			
		}
		.fanhui{
			width: 80%;
			min-height: 200px;
			background-color: green;
			margin:0 auto;
		}
		.fanhui span{
			display: inline-block;
			background-color: aquamarine;
			color: #333;
			padding:10px 20px;
			border-radius:5px;
			margin: 20px;
			cursor: pointer;
		}
	</style>
	<title></title>
</head>
<body>
	<div class="header">
		<input type="text" name="number"><button>随机产生菜名</button>
	</div>
	<div class="list">
	</div>
	<div class="fanhui"></div>
<script>
	$(function(){
		$('button').click(function(){
			$('.list').on('click','span',function(){
				$(this).css({
					"pointer-events":"none",
					"cursor": "not-allowed",
					"backgroundColor":"#ddd",
				});
				var sval = $(this).text();
				$.get('yd.php',{spval:$(this).text()},function(e){
					console.log(1);
					for(var i=0;i<e.length;i++){
						$('<span>'+e[i]+'</span>').appendTo($('.fanhui'));
					
				}
					
				},'json')
			})
			//get请求
			$.get('getgan.php',{num:$('input').val()},function(e){
				$('.list').html('');
				for(var i=0;i<e.length;i++){
					$('<span>'+e[i]+'</span>').appendTo($('.list'));
				}
			},'json')
		});
	});
</script>

</body>
</html>

yd.php

<?php

var_dump($_GET);

// $name = (int)$_GET['spval'];

$cainame = $_GET['spval'];

$str = $cainame .'|';

file_put_contents('record.txt',$str,FILE_APPEND);

$stu_arr = explode('|',file_get_contents('record.txt'));

echo json_encode($stu_arr);

getgan.php

<?php 
$num = (int)$_GET['num'];

//至少产生1名学生
if($num<=0){
	$re= [
		'code' => 1001,
		'message'=>'至少产生一名学生'
	];
	echo json_encode($re);
	die;
}
//所有的学生
$stu_arr = explode(' · ',file_get_contents('stu.txt'));

$arr = [];  //用户保存学生的编号
for($i=0;$i<$num;$i++){ //用于循环产生学生编号
	$stu_num = mt_rand(0,53); //随机产生
	while(in_array($stu_num,$arr)){ //判断是否产生了相同的学生编号
		$stu_num = mt_rand(0,52);;
	}
	array_push($arr,$stu_num);
}

$re = []; //返回的学生数组
foreach($arr as $k){
	array_push($re,$stu_arr[$k]);
}
echo json_encode($re);

record.txt

豆鼓鱼|羊耳鸡塔|豆瓣鲫鱼|酱爆肉|坛子肉|鱼香荷包蛋|麻酱凤尾|绣球鱼翅|芪烧活鱼|豆鼓鱼|火爆腰花|复元汤|羊耳鸡塔

效果展示

在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值