设计一个前端在数据库调取数据的表格，并完成基础点击增删改查的功能：
1.首先写一个前端样式（空壳）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery.js"></script>
<script>
//待填写
</script>
<style>
*{
margin: 0%;
padding: 0%;
}
.body{
background: #ddd;
width:400px;
height:300px;
margin: 200px auto;
border-radius: 20px;
}
.top{
display: flex;
margin:20px 0;
padding: 10px;
justify-content: space-between;
background: lightblue;
border-radius: 30px;
}
.top h3{
font-weight: 500;
margin: 0 10px;
}
table{
text-align: center;
margin: 20px 30px;
height:180px;
width:80%;
}
li{
list-style: none;
}
.to{
background:#8e3b3b1a;
width:300px;
height:150px;
line-height: 30px;
margin:-120px auto;
display: none;
}
.ch{
background:#8e3b3b1a;
width:300px;
height:150px;
line-height: 30px;
margin:-120px auto;
display: none;
}
</style>
</head>
<body>
<div class="body">
<div class="top">
<h3>商品名称:</h3>
<input type="text" placeholder="请输入商品名称" class="input">
<input type="button" value="查找" class="search">
<input type="button" value="添加" class="add">
</div>
<table border="1">
<thead>
<tr>
<th>商品名称</th>
<th>数量</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td>count</td>
<td>price</td>
<td>
<input type="button" value="修改">
<input type="button" value="删除">
</td>
</tr>
</tbody>
</table>
</div>
<div class="to"> <!-- 添加模块--实现点击出现，完成添加或取消操作后消失 -->
<ul>
<li>商品名称: <input type="text" class="name"></li>
<li>商品数量: <input type="text" class="count"></li>
<li>商品价格: <input type="text" class="price"></li>
<li><input type="button" value="添加商品" class="end"></li>
<li><input type="button" value="取消" class="no"></li>
</ul>
</div>
<div class="ch"> <!-- 修改模块--实现点击出现，完成修改或取消操作后消失 -->
<ul>
<li>商品名称: <input type="text" class="name_c"></li>
<li>商品数量: <input type="text" class="count_c"></li>
<li>商品价格: <input type="text" class="price_c"></li>
<li><input type="button" value="修改商品" class="end_c"></li>
<li><input type="button" value="取消" class="no_c"></li>
</ul>
</div>
</body>
</html>2.开始第一步：查数据--即在数据库中调出所需表格放入前端界面中
$.ajax({
url:"buy_list",
type:"get",
data:{
},
success:function(value){
$("tbody").empty()//清空
var arr=value.data
for (var i=0;i<arr.length;i++){
//添加到前端界面
$("tbody").append(
"<tr>"+
"<td>"+arr[i].name+"</td>"+
"<td>"+arr[i].count+"</td>"+
"<td>"+arr[i].price+"</td>"+
"<td><input type='button' value='删除' class='delete' index='"+arr[i].name+"'><input type='button' class='change' value='修改' index='"+arr[i].name+"'></td>"+
"</tr>")
}
},
error:function(){
alert("请求失败！");
},
})对应Java（此处只给出关键部分，也就是doget部分）
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//解决中文乱码问题
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/json;charset=utf-8");
System.out.println("接受到啦!");
String sql="select * from buy_list";
String[] colums= {"name","count","price"};
String res =MysqlUtil.getJsonBySql(sql, colums);
System.out.println(res);
//后端给前端返回数据
response.getWriter().write(res);
}3.删除模块
$("tbody").on("click",".delete",function(){//注意：绑定的delete按钮是后生成的，所以绑定事件形式采取这种格式进行书写
//alert($(this).attr("index"))
var name=$(this).attr("index")
//删除
$.ajax({
url:"delete",
type:"post",
data:{
name
},
success:function(value){
alert(value)
//刷新操作
location.reload()
},
error:function(){
alert("请求失败！");
},
})
})删除模块所对应的Java文件内部：（此处只给出关键部分，也就是dopost部分）
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
System.out.println("接受到了post");
String name=request.getParameter("name");
System.out.println("name");
//删除
String sql="delete from buy_list where name='"+name+"'";
//注意：这里的name位置，需要被两个引起来
int num = MysqlUtil.del(sql);
//返回信息
String res ="删除失败";
if(num>0) {
res="删除成功";
}
//后端给前端返回数据
response.getWriter().write(res);
}
4.添加模块
//添加
$(".end").on("click",function(){
var add_name=$(".name").val()
var add_count=$(".count").val()
var add_price=$(".price").val()
console.log(add_name)
console.log(add_count)
console.log(add_price)
$.ajax({
url:"add",
type:"post",
data:{
add_name,
add_count,
add_price
},
success:function(value){
alert(value)
//刷新操作
location.reload()
},
error:function(){
alert("请求失败！");
},
})
})对应Java部分（同样只给出关键的dopost部分）
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
System.out.println("add");
String name=request.getParameter("add_name");
String count=request.getParameter("add_count");
String price=request.getParameter("add_price");
//添加
String sql="insert into buy_list(name,count,price) values(\""+name+"\","+count+","+price+")";
int num=MysqlUtil.add(sql);
//返回信息
String res ="添加失败";
if(num>0) {
res="添加成功";
}
//后端给前端返回数据
response.getWriter().write(res);
}5.修改部分较为特殊（增加了一步查找并返回原数据的操作）
//隐藏修改
$(".no_c").on("click",function(){
$(".ch").css("display","none")
})
//回显（点击修改后的操作）
$("tbody").on("click",".change",function(){
$(".to").css("display","none")
$(".ch").css("display","block")
var name=$(this).attr("index")
$.ajax({
url:"change",//在change中写入后端代码
type:"get",
data:{
name
},
success:function(value){
var obj=value.data[0]//获取返回值（有且只有一条，所以是data[0]）
console.log(obj)
//让获取的返回值添加到输入框的位置，即回显
$(".name_c").val(obj.name)
$(".count_c").val(obj.count)
$(".price_c").val(obj.price)
$(".end_c").attr("index",obj.name)
},
error:function(){
alert("请求失败！");
},
})
})
//修改
$(".end_c").on("click",function(){
//获取回显显示在输入框内返回值
var addname=$(".name_c").val()
var addcount=$(".count_c").val()
var addprice=$(".price_c").val()
var name=$(this).attr("index")
//验证 //console.log(addname)
$.ajax({
url:"change_end",
type:"post",
data:{
addname,
addcount,
addprice,
name
},
success:function(value){
alert(value)
//刷新操作
location.reload()
},
error:function(){
alert("请求失败！");
},
})
//修改完成后，隐藏修改模块
$(".ch").css("display","none")
})
对应Java代码（回显）
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 解决中文乱码
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
// 设置后端给前端返回的数据为json格式（因为返回对象类型的值了）
response.setContentType("text/json;charset=utf-8");
String name=request.getParameter("name");
// 查找
String sql="select * from buy_list where name = \""+name+"\"";
String[] colums= {"name","count","price"};
String res=MysqlUtil.getJsonBySql(sql, colums);
System.out.println(res);
// 后端给前端返回数据
response.getWriter().write(res);
}对应Java代码（修改）
【注：空格的书写规范】
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//解决乱码问题
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String name=request.getParameter("name");
String addname =request.getParameter("addname");
String addcount=request.getParameter("addcount");
String addprice=request.getParameter("addprice");
System.out.println("name");
//【注意：替换成外部数据+ +后一定要注意保留原有的空格问题】
String sql="update buy_list set name=\""+addname+"\",count="+addcount+",price="+addprice+" where name=\""+name+"\"";
//注意：这里的name位置，需要被两个引起来
int num = MysqlUtil.update(sql);
//返回信息
String res ="修改失败";
if(num>0) {
res="修改成功";
}
//后端给前端返回数据
response.getWriter().write(res);
}
完整版HTML文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery.js"></script>
<script>
$(function(){
$.ajax({
url:"buy_list",
type:"get",
data:{
},
success:function(value){
$("tbody").empty()//清空
var arr=value.data
for (var i=0;i<arr.length;i++){
$("tbody").append(
"<tr>"+
"<td>"+arr[i].name+"</td>"+
"<td>"+arr[i].count+"</td>"+
"<td>"+arr[i].price+"</td>"+
"<td><input type='button' value='删除' class='delete' index='"+arr[i].name+"'><input type='button' class='change' value='修改' index='"+arr[i].name+"'></td>"+
"</tr>")
}
},
error:function(){
alert("请求失败！");
},
})
$("tbody").on("click",".delete",function(){
//alert($(this).attr("index"))
var name=$(this).attr("index")
//删除
$.ajax({
url:"delete",
type:"post",
data:{
name
},
success:function(value){
alert(value)
//刷新操作
location.reload()
},
error:function(){
alert("请求失败！");
},
})
})
//显示添加模块
$(".add").on("click",function(){
$(".to").css("display","block")
$(".ch").css("display","none")
})
//隐藏添加模块
$(".end").on("click",function(){
$(".to").css("display","none")
})
$(".no").on("click",function(){
$(".to").css("display","none")
})
//添加
$(".end").on("click",function(){
var add_name=$(".name").val()
var add_count=$(".count").val()
var add_price=$(".price").val()
console.log(add_name)
console.log(add_count)
console.log(add_price)
$.ajax({
url:"add",
type:"post",
data:{
add_name,
add_count,
add_price
},
success:function(value){
alert(value)
//刷新操作
location.reload()
},
error:function(){
alert("请求失败！");
},
})
})
//隐藏修改
$(".no_c").on("click",function(){
$(".ch").css("display","none")
})
//回显（点击修改后的操作）
$("tbody").on("click",".change",function(){
$(".to").css("display","none")
$(".ch").css("display","block")
var name=$(this).attr("index")
$.ajax({
url:"change",//在change中写入后端代码
type:"get",
data:{
name
},
success:function(value){
var obj=value.data[0]//获取返回值（有且只有一条，所以是data[0]）
console.log(obj)
//让获取的返回值添加到输入框的位置，即回显
$(".name_c").val(obj.name)
$(".count_c").val(obj.count)
$(".price_c").val(obj.price)
$(".end_c").attr("index",obj.name)
},
error:function(){
alert("请求失败！");
},
})
})
//修改
$(".end_c").on("click",function(){
//获取回显显示在输入框内返回值
var addname=$(".name_c").val()
var addcount=$(".count_c").val()
var addprice=$(".price_c").val()
var name=$(this).attr("index")
//验证 //console.log(addname)
$.ajax({
url:"change_end",
type:"post",
data:{
addname,
addcount,
addprice,
name
},
success:function(value){
alert(value)
//刷新操作
location.reload()
},
error:function(){
alert("请求失败！");
},
})
//修改完成后，隐藏修改模块
$(".ch").css("display","none")
})
})
</script>
<style>
*{
margin: 0%;
padding: 0%;
}
.body{
background: #ddd;
width:400px;
height:300px;
margin: 200px auto;
border-radius: 20px;
}
.top{
display: flex;
margin:20px 0;
padding: 10px;
justify-content: space-between;
background: lightblue;
border-radius: 30px;
}
.top h3{
font-weight: 500;
margin: 0 10px;
}
table{
text-align: center;
margin: 20px 30px;
height:180px;
width:80%;
}
li{
list-style: none;
}
.to{
background:#8e3b3b1a;
width:300px;
height:150px;
line-height: 30px;
margin:-120px auto;
display: none;
}
.ch{
background:#8e3b3b1a;
width:300px;
height:150px;
line-height: 30px;
margin:-120px auto;
display: none;
}
</style>
</head>
<body>
<div class="body">
<div class="top">
<h3>商品名称:</h3>
<input type="text" placeholder="请输入商品名称" class="input">
<input type="button" value="查找" class="search">
<input type="button" value="添加" class="add">
</div>
<table border="1">
<thead>
<tr>
<th>商品名称</th>
<th>数量</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td>count</td>
<td>price</td>
<td>
<input type="button" value="修改">
<input type="button" value="删除">
</td>
</tr>
</tbody>
</table>
</div>
<div class="to"> <!-- 添加模块--实现点击出现，完成添加或取消操作后消失 -->
<ul>
<li>商品名称: <input type="text" class="name"></li>
<li>商品数量: <input type="text" class="count"></li>
<li>商品价格: <input type="text" class="price"></li>
<li><input type="button" value="添加商品" class="end"></li>
<li><input type="button" value="取消" class="no"></li>
</ul>
</div>
<div class="ch"> <!-- 修改模块--实现点击出现，完成修改或取消操作后消失 -->
<ul>
<li>商品名称: <input type="text" class="name_c"></li>
<li>商品数量: <input type="text" class="count_c"></li>
<li>商品价格: <input type="text" class="price_c"></li>
<li><input type="button" value="修改商品" class="end_c"></li>
<li><input type="button" value="取消" class="no_c"></li>
</ul>
</div>
</body>
</html>结果：
【注：此处只给出了一个简单的css样式，详细可见style部分】
