一、添加
要求：
按下添加按钮出现一个板块输入添加的数据信息，点击板块的添加按钮，添加；点击取消，板块消失。
实现：
1.首先，设计页面输入框格式，表格首行
2.从数据库里调数据
3.添加
1.首先，设计页面输入框格式，表格首行
<body>商品名称：<input type="text" class="text"><input type="button" value="查找" class="searchbtn" ><input type="button" value="添加" class="addbtn" >
<table border="1"><thead><tr><th>商品名称</th><th>数量</th><th>价格</th><th>操作</th></tr></thead><tbody><!-- <tr><td>id</td><td>姓名</td><td>年龄</td><td>性别</td><td>班级</td><th><input type="button" value="修改"><input type="button" value="删除"></th></tr>
2.从数据库里调数据
请求路径；
请求方式；
参数域；
请求成功；
请求失败；
这里调数据不需要传参数，把数据库返回的信息在表格后插入。
$(function(){//发起请求$.ajax({url:"SearchProduct",//请求路径type:"get",//请求方式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].num+"</td>"+"<td>"+arr[i].price+"</td>"+"<td><input type='button' value='修改' class='update' index='"+arr[i].name+"'><input type='button' value='删除' class='delete' index='"+arr[i].name+"'></td>"+"</tr>") }},error:function(){//请求失败alert("出错啦")},})服务生接收请求，执行逻辑 ，返回信息。（查找数据，后端返回数据）
@WebServlet("/SearchProduct")
public class SearchProduct extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public SearchProduct() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/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");
// 设置成这样，必须有一个json格式// 接收参数
// 查找String sql="select * from 商品表";String[] colums= {"name","num","price"};String res=MysqlUtil.getJsonBySql(sql, colums);System.out.println(res);
// 后端给前端返回数据response.getWriter().write(res);
后端数据如图：
3.添加
$1.设计添加的版块样式（刚开始隐藏，只有点击“添加”按钮后显现）
<div class='add_model'>
添加
<br><br>
名称：<input type='text' class='name'><br>
数量：<input type='text' class='num'><br>
价格：<input type='text' class='price'><br>
<input type="button" value="添加" class="add" > <input type="button" value="取消" class="cancel" >
</div>.add_model{width:240px;heigth:150px;border:4px solid blue;margin-top:20px;padding:15px;display:none;}$2. 点击“添加”按钮后
//显示添加模块$(".addbtn").on("click",function(){$(".add_model").css("display","block")})
$3. 输入框添加
#1. val() 获取输入框的值
#2. 前端获取的值传到后端（请求路径；请求方式；参数域；请求成功；请求失败）
//添加$(".addbtn").on("click",function(){//获取输入框里的值var name=$(".name").val()var num=$(".num").val()var price=$(".price").val()console.log(name)console.log(num)console.log(price)$.ajax({url:"AddServlet",//请求路径type:"post",//请求方式data:{name,num,price},//参数域success:function(value){//请求成功console.log(value)//页面刷新location.reload()},error:function(){//请求失败alert("出错啦")},})})#3.后端接收参数，并返回信息
// 解决中文乱码request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");//接收参数String name=request.getParameter("name");String num=request.getParameter("num");String price=request.getParameter("price");System.out.println(name);System.out.println(num);System.out.println(price);//添加String sql="insert into 商品表(name,num,price) values(\""+name+"\","+num+","+price+")";int n = MysqlUtil.add(sql);//返回信息String res="添加失败";if(n>0) {res="添加成功";}response.getWriter().write(res);}#4.请求成功，页面刷新
location.reload()
$4.点击“取消”按钮板块消失
//隐藏添加模块$(".cancel").on("click",function(){$(".add_model").css("display","none")})4.效果
二、删除
1.同以上“添加”部分相同，假设现在已经从数据库调出数据（不再赘述，同步骤一、添加 1.2.）
2.删除
因“删除”键是从数据库调数据时后加的，在表格的tbody里，故需要在tbody里找“删除”按钮。在“添加”板块已经对“删除”按钮加class属性。
for(var i=0;i<arr.length;i++){$("tbody").append("<tr>"+"<td>"+arr[i].name+"</td>"+"<td>"+arr[i].num+"</td>"+"<td>"+arr[i].price+"</td>"+"<td><input type='button' value='修改' class='update' index='"+arr[i].name+"'><input type='button' value='删除' class='delete' index='"+arr[i].name+"'></td>"+"</tr>") }tips:
我这里的index属性值设的是name，如果有id可以设成id
1.在tbody里找到删除按钮
2.得到Index属性值
3.前端传入后端（请求路径；请求方式；参数域；请求成功；请求失败）
把得到的Index属性值传入后端
//删除$("tbody").on("click",".delete",function(){var id= $(this).attr("index")$.ajax({url:"DeleteServlet",//请求路径type:"post",//请求方式data:{id},//参数域success:function(value){//请求成功alert(value)//页面刷新location.reload()},error:function(){//请求失败alert("出错啦")},})})4.后端接收参数，执行逻辑，返回信息
// 解决中文乱码request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");// 接收参数String id=request.getParameter("id");
// 删除String sql="delete from 商品表 where name = '"+id+"'";int num=MysqlUtil.del(sql);
// 返回信息String res="删除失败";if(num>0) {res="删除成功";}response.getWriter().write(res);}3.效果
数据库数据如图：
三、修改
要求：
点击tbody中的修改按钮，出现修改的板块，
板块中要回显信息，在原有的基础上修改信息。
点击“取消”按钮板块消失
实现：
1. 前两个步骤还是同“添加”1.2.
2. 修改
$1. 设计修改的版块样式（刚开始隐藏，只有点击“添加”按钮后显现）
<div class='update_model'>
修改
<br><br>
名称：<input type='text' class='u_name'><br>
数量：<input type='text' class='u_num'><br>
价格：<input type='text' class='u_price'><br>
<input type="button" value="修改" class="updatebtn" > <input type="button" value="取消" class="u_cancel" >
</div>.update_model{width:240px;heigth:150px;border:4px solid gold;margin-top:20px;padding:15px;display:none;}隐藏模块
两个模块不冲突（不同时显示）
//显示添加模块$(".addbtn").on("click",function(){$(".add_model").css("display","block")$(".update_model").css("display","none")})//隐藏修改模块$(".u_cancel").on("click",function(){$(".update_model").css("display","none")})
$2. 点击“修改”按钮后
#1.信息回显
用val()获取值
//修改弹框展示回显$("tbody").on("click",".update",function(){$(".add_model").css("display","none")$(".update_model").css("display","block")var id=($(this).attr("index"))$.ajax({url:"SearchByName",//请求路径type:"get",//请求方式data:{id},//参数域success:function(value){//请求成功console.log(value)var obj=value.data[0]$(".u_name").val(obj.name)$(".u_num").val(obj.num)$(".u_price").val(obj.price)$(".updatebtn").attr("index",obj.name)},error:function(){//请求失败alert("出错啦")},})})// 解决中文乱码request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");
// 设置后端给前端返回的数据为json格式response.setContentType("text/json;charset=utf-8");String id=request.getParameter("id");
// 查找String sql="select * from 商品表 where name = '"+id+"'";String[] colums= {"name","num","price"};String res=MysqlUtil.getJsonBySql(sql, colums);System.out.println(res);
// 后端给前端返回数据response.getWriter().write(res);}
#2.修改
传入参数（name,num,price,id）（请求路径；请求方式；参数域；请求成功；请求失败）
//修改$(".updatebtn").on("click",function(){//获取输入框里的值var name=$(".u_name").val()var num=$(".u_num").val()var price=$(".u_price").val()var id=$(this).attr("index")console.log(id)$.ajax({url:"UpdateServlet",//请求路径type:"post",//请求方式data:{name,num,price,id},//参数域success:function(value){//请求成功console.log(value)//页面刷新location.reload()},error:function(){//请求失败alert("修改出错啦")},})})后端接收参数 ，并返回信息
// 解决中文乱码request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");//接收参数String name=request.getParameter("name");String num=request.getParameter("num");String price=request.getParameter("price");String id=request.getParameter("id");System.out.println(name);System.out.println(num);System.out.println(price);//修改String sql="update 商品表 set name=\""+name+"\",num="+num+",price="+price+" where name=\""+id+"\"";int n = MysqlUtil.add(sql);//返回信息String res="修改失败";if(n>0) {res="修改成功";}response.getWriter().write(res);}#3.请求成功，页面刷新
location.reload()
3.效果
