自学内容网 自学内容网
自学内容网 > 正文

后端-对表格数据进行添加、删除和修改

🕗 发布于 2024-09-27 07:34 java  前端  服务器  

一、添加

要求：

        按下添加按钮出现一个板块输入添加的数据信息，点击板块的添加按钮，添加；点击取消，板块消失。

实现：

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.效果


原文地址：https://blog.csdn.net/m0_75163045/article/details/142563645

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024