淘宝简易后台

前台html+js部分

<!DOCTYPE html>
<html>
<head>
	<title>淘宝简易后台</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<p>宝贝名:<input type="text" name=""></p>
<p>价格:<input type="text" name=""></p>
<p>种类:
	<select>
		<option value="0">请选择种类</option>
		<option value="1">帽子</option>
		<option value="2">上衣</option>
		<option value="3">裤子</option>
		<option value="4">鞋子</option>
		<option value="5">化妆品</option>
	</select>
</p>
<p>数量:<input type="text"></p>
<p><input type="button"	value="上传" name=""></p>

<!-- 添加数据 -->
<table border="1px solid #000">
	<tr id="title_tr">
		<td>宝贝名</td>
		<td>价格</td>
		<td>种类</td>
		<td>数量</td>
	</tr>
</table>

<script type="text/javascript">
	// 一。刷新页面表格
	function updateTable() {
		// 发起请求,刷新表格 sqltype:1=》插入 2=》查询
		var param = {'sqltype':2};

		// 清空table表格 
		$('tr').not('#title_tr').remove();

		$.post('taobao.php',param,function(obj){
			// console.log(obj);
			var data = JSON.parse(obj);
			// 请求成功 
			if (data.code == 1) {
				var goods = data.data;
				// console.log(goods);
				// 添加数据到界面
				for (var i = 0; i < goods.length; i++) {
					// 创建tr
					var $tr = $('<tr></tr>');
					// 创建tname 
					$('<td></td>').html(goods[i].tname).appendTo($tr);
					// 价格
					$('<td></td>').html(goods[i].tprice).appendTo($tr);

					// ttype 
					// console.log(goods[i].ttype);
					var str = '';
					switch(goods[i].ttype){
						case '1':
							str = '帽子';
							break;
						case '2':
							str = '上衣';
							break;
						case '3':
							str = '裤子';
							break;
						case '4':
							str = '鞋子';
							break;
						case '5':
							str = '化妆品';
							break;
					}

					$('<td></td>').html(str).appendTo($tr);
					// tnum
					$('<td></td>').html(goods[i].tnum).appendTo($tr);

					// 添加到table
					$tr.appendTo('table');

				}
			}
		})
	}
	// 调用刷新表格
	updateTable();

	// 二。上传操作
	// 给按钮绑定上传
	$('input:button').click(function(){
		// 拿到宝贝名
		var tname = $('input').eq(0).val();
		// 拿到宝贝价格
		var tprice = $('input').eq(1).val();
		// 拿到宝贝种类
		var ttype = $('select').val();
		// 拿到数量
		var tnum = $('input').eq(2).val();

		// 判断上传内容是否合格
		if (tname == '') {
			return;
		}

		// Ajax上传数据
		var param = {};
		param.tname = tname;
		param.tprice = tprice;
		param.ttype = ttype;
		param.tnum = tnum;
		param.sqltype = 1; // 插入操作

		$.post('taobao.php',param, function(data){
			// console.log(data.code);
			var obj = JSON.parse(data);
			// console.log(obj.code);
			if (obj.code == 1) {
				// 调用刷新表格
				updateTable();
			}
		})

		// 清空输入内容 
		$('input').eq(0).val('');
		$('input').eq(1).val('');
		$('input').eq(2).val('');
		$('select').val(0);
	})
</script>

</body>
</html>

后台部分:这里用php写的模拟后台

<?php
	
	// 链接数据库
	$db = mysqli_connect('127.0.0.1','root','','taobao');
	// 判断是否链接成功
	if (!mysqli_connect_errno($db)) {
		// echo "连接成功";
		// 解决中文乱码
		mysqli_query($db,"SET NAMES UTF8");
		// 判断是查询还是插入
		$sqltype = $_POST['sqltype'];
		// echo $sqltype;
		if ($sqltype == 1) {
			// 插入数据
		/*
			// 新建一个可以自动增加顺序的表
			$sql = "CREATE TABLE IF NOT EXISTS goods(
				id INT UNSIGNED	AUTO_INCREMENT KEY,
				tname VARCHAR(20) NOT NULL,
				tprice VARCHAR(20) NOT NULL,
				ttype VARCHAR(20) NOT NULL,
				tnum VARCHAR(20) NOT NULL
			)";
			mysqli_query($db, $sql);
		*/	
	
			$tname = $_POST['tname'];

			$tprice = $_POST['tprice'];
			$ttype = $_POST['ttype'];
			$tnum = $_POST['tnum'];
			// 写插入语句
			$sql = "INSERT INTO goods(tname,tprice,ttype,tnum) VALUES ('$tname','$tprice','$ttype','$tnum')";
			// 执行
			$result = mysqli_query($db, $sql);
			// 判断插入是否成功
			if ($result) {
				// echo "成功";
				// 数据插入成功,返回成功
				echo json_encode(['code'=>1,'msg'=>'success']);
			} else {
				echo "失败";
			}
			
		} elseif ($sqltype == 2) {
			// 查询数据
			$sql = "SELECT * FROM goods";
			// 执行语句 
			$result = mysqli_query($db,$sql);
			// 执行成功
			if (mysqli_affected_rows($db)) {
				// 声明数组
				$arr = [];
				while ($row = mysqli_fetch_array($result)) {
					// 将数据放入数组 
					array_push($arr, $row);
				}
				// 返回数据
				echo json_encode(['code'=>1,'data'=>$arr]);
			}
		}
	} else {
		echo "链接失败";
	}

?>

欢迎分享本文,转载请保留出处:前端ABC » 淘宝简易后台

赞 (2)
分享到:更多 ()

发表评论 0