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