前端ABC前台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 "链接失败";
}
?>