后端-对表格数据进行添加、删除和修改
一、添加
要求：
按下添加按钮出现一个板块输入添加的数据信息，点击板块的添加按钮，添加；点击取消，板块消失。
实现：
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.data
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>")
}
},
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.效果
