设计一个前端在数据库调取数据的表格，并完成基础点击增删改查的功能：
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.datafor (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.datafor (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部分】
