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

news2024/12/24 11:30:17

一、添加

要求：

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

实现：

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2179984.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SpringBoot助力墙绘艺术市场创新

SpringBoot助力墙绘艺术市场创新

3 系统分析 当用户确定开发一款程序时&#xff0c;是需要遵循下面的顺序进行工作&#xff0c;概括为&#xff1a;系统分析–>系统设计–>系统开发–>系统测试&#xff0c;无论这个过程是否有变更或者迭代&#xff0c;都是按照这样的顺序开展工作的。系统分析就是分析系…
阅读更多...
数字化智能工厂应用场景

数字化智能工厂应用场景

数字化智能工厂的应用场景广泛&#xff0c;涵盖了多个行业和领域。以下是一些主要的应用场景&#xff1a; 一、制造业 汽车制造&#xff1a;数字化智能工厂在汽车制造业中得到了广泛应用。通过自动化生产线、机器人、物联网和人工智能等技术&#xff0c;汽车制造商能够实现高…
阅读更多...
三分钟速览：Node.js 版本差异与关键特性解析

三分钟速览：Node.js 版本差异与关键特性解析

Node.js 是一个广泛使用的 JavaScript 运行时环境&#xff0c;允许开发者在服务器端运行 JavaScript 代码。随着技术的发展&#xff0c;Node.js 不断推出新版本&#xff0c;引入新特性和改进。了解不同版本之间的差异对于开发者来说至关重要。以下是一个快速指南&#xff0c;帮…
阅读更多...
Redis篇（应用案例 - 附近商户）（持续更新迭代）

Redis篇（应用案例 - 附近商户）（持续更新迭代）

目录 一、GEO数据结构的基本用法 二、导入店铺数据到GEO 三、实现附近商户功能 一、GEO数据结构的基本用法 GEO就是Geolocation的简写形式&#xff0c;代表地理坐标。 Redis在3.2版本中加入了对GEO的支持&#xff0c;允许存储地理坐标信息&#xff0c;帮助我们根据经纬度来…
阅读更多...
【高性能内存池】基本框架 + 固定长度内存池实现 1

【高性能内存池】基本框架 + 固定长度内存池实现 1

高性能内存池 1. 基本框架2. 定长内存池的实现2.1 介绍定长内存池2.2 T* New()2.3 void Delete(T* obj) 3. 源码&#xff08;附赠测试&#xff09;4. 总结 1. 基本框架 高并发内存池主要由三个部分构成&#xff1a; 1.thread cache:用于小于256KB的内存的分配。线程缓存是每个…
阅读更多...
opencv实战项目（三十）：使用傅里叶变换进行图像边缘检测

opencv实战项目（三十）：使用傅里叶变换进行图像边缘检测

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一&#xff0c;什么是傅立叶变换&#xff1f;二&#xff0c;图像处理中的傅立叶变换&#xff1a;三&#xff0c;傅里叶变换进行边缘检测&#xff1a; 一&#xff0c…
阅读更多...
适合初学者的[JAVA]: 基础面试题

适合初学者的[JAVA]: 基础面试题

目录 说明 前言 String/StringBuffer/StringBuilder区别 第一点: 第二点: 总结&#xff1a; 反射机制 JVM内存结构 运行时数据区域被划分为5个主要组件&#xff1a; 方法区&#xff08;Method Area&#xff09; 堆区&#xff08;Heap Area&#xff09; 栈区&#x…
阅读更多...
局部整体（七）利用python绘制圆形嵌套图

局部整体（七）利用python绘制圆形嵌套图

局部整体&#xff08;七&#xff09;利用python绘制圆形嵌套图 圆形嵌套图&#xff08; Circular Packing&#xff09;简介 将一组组圆形互相嵌套起来&#xff0c;以显示数据的层次关系&#xff0c;类似于矩形树图。数据集中每个实体都由一个圆表示&#xff0c;圆圈大小与其代…
阅读更多...
Spring Task 调度任务

Spring Task 调度任务

Spring Task是调度任务框架&#xff0c;通过配置&#xff0c;程序可以按照约定的时间自动执行代码逻辑&#xff0c;基于注解方式实现需要如下注解&#xff1a; Component 任务调度类交给Spring IOC容器管理EnableScheduling 启用 Spring 的定时任务&#xff08;Scheduling&…
阅读更多...
专业学习｜随机规划概观（内涵、分类以及例题分析）

专业学习｜随机规划概观（内涵、分类以及例题分析）

一、随机规划概览 &#xff08;一&#xff09;随机规划的定义 随机规划是通过考虑随机变量的不确定性来制定优化决策的一种方法。其基本思想是在决策过程中&#xff0c;目标函数和约束条件可以包含随机因素。 &#xff08;1&#xff09;重点 随机规划的中心问题是选择参数&am…
阅读更多...
最新版ingress-nginx-controller安装 使用host主机模式

最新版ingress-nginx-controller安装 使用host主机模式

最新版ingress-nginx-controller安装 使用host主机模式 文章目录 最新版ingress-nginx-controller安装 使用host主机模式单节点安装方式多节点高可用安装方式 官方参考链接&#xff1a; https://github.com/kubernetes/ingress-nginx/ https://kubernetes.github.io/ingress-ng…
阅读更多...
05_中断与数码管动态显示

05_中断与数码管动态显示

中断是单片机系统重点中的重点&#xff0c;因为有了中断&#xff0c;单片机就具备了快速协调多模块工作的能力&#xff0c;可以完成复杂的任务。本章将首先带领大家学习一些必要的 C 语言基础知识&#xff0c;然后讲解数码管动态显示的原理&#xff0c;并最终借助于中断系统来完…
阅读更多...
VS code user setting 与 workspace setting 的区别

VS code user setting 与 workspace setting 的区别

VS code user setting 与 workspace setting 的区别 引言正文引言 相信有不少开始接触 VS code 的小伙伴会有疑问，user setting 与 workspace setting 有什么区别呢？这里我们来说明一下 正文 首先，当我们使用 Ctrl + Shift + P 打开搜索输入 setting 后，可以弹出 4 个se…
阅读更多...
SSM+Vue家教平台系统

SSM+Vue家教平台系统

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 spring-mybatis.xml3.5 spring-mvc.xml3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平台Java领域优质创作…
阅读更多...
网站建设中，https协议和http协议分别是什么，有什么区别？

网站建设中，https协议和http协议分别是什么，有什么区别？

HTTP&#xff08;超文本传输协议&#xff09;和 HTTPS&#xff08;安全超文本传输协议&#xff09;是互联网通信中两种非常关键的协议&#xff0c;它们在安全性、性能以及证书等方面存在区别。以下是具体分析&#xff1a; 安全性 HTTP&#xff1a;数据传输以明文形式进行&#…
阅读更多...
宝塔搭建nextcould 30docker搭建onlyoffic8.0

宝塔搭建nextcould 30docker搭建onlyoffic8.0

宝塔搭建nextcould 宝塔搭建nextcould可以参考这两个博文 我搭建的是30版本的nextcould&#xff0c;服务组件用的是下面这些&#xff0c;步骤是一样的&#xff0c;只是版本不一样而已 nginx 1.24.0 建议选择nginx&#xff0c;apache没成功。 MySQL 8.0以上都可以 php 8.2.…
阅读更多...
“你好BOE”重磅亮相首届上海国际光影节 打造“艺术x科技”顶级影像盛宴

“你好BOE”重磅亮相首届上海国际光影节 打造“艺术x科技”顶级影像盛宴

黄浦江畔,北外滩胜地。作为首届上海国际光影节虹口区分会场的重点项目之一,9月29日-10月5日,BOE(京东方)年度标杆性品牌巡展IP“你好BOE”Super O SPACE影像科技展在上海北外滩滨江5米平台盛大启幕,BOE(京东方)携手上海电影、上影元、OUTPUT、新浪微博、海信、OPPO、京东等众多…
阅读更多...
信创产品测试报告有什么作用？测试依据是什么？

信创产品测试报告有什么作用？测试依据是什么？

一、信创产品测试报告是什么&#xff1f; 针对于某一款具体的软件产品或硬件产品进行的产品测试&#xff0c;验证其是否符合信创的要求。这一类产品&#xff0c;主要分为四类&#xff1a; 三类九款产品&#xff08;计算机终端、操作系统、数据库&#xff09;&#xff1b;通用…
阅读更多...
【Python快速学习笔记02】基础语法学习(变量等）

【Python快速学习笔记02】基础语法学习(变量等）

目录 1.标识符与代码书写注意点 2.变量类型 1.标识符与代码书写注意点 &#xff08;1&#xff09;组成&#xff1a;字母&#xff0c;下划线&#xff0c;数字 &#xff08;2&#xff09;注意点&#xff1a;但是不能由数字开头&#xff0c;区分大小写 &#xff08;3&#xff…
阅读更多...
AltiumDesigner脚本开发-DIP封装制作

AltiumDesigner脚本开发-DIP封装制作

1.点击工具栏的运行工具(蓝色向右三角图标)可以执行脚本程序&#xff1b; 2.点击菜单栏Run->Run可以执行脚本程序&#xff1b; 3.在脚本编辑器中&#xff0c;按键盘的F9键可以执行脚本程序&#xff1b; 4.通过菜单栏执行脚本程序&#xff08;需要将程序添加到菜单栏中&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023