2001Employee的简单增删改查,使用ajax请求,Servlet,数据库

最新推荐文章于 2021-08-05 12:23:48 发布
最新推荐文章于 2021-08-05 12:23:48 发布
阅读量189 收藏
点赞数
分类专栏： 数据库 文章标签： servlet ajax mysql json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43917151/article/details/104964507
版权

2001Employee的简单增删改查，使用ajax请求,Servlet,数据库
项目目录
在这里插入图片描述
一、编写html
1、编写主页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
		<link rel="stylesheet" type="text/css" href="css/pagination.css"/>
		<script src="js/jquery-3.4.1.js"></script>		
		<script src="js/jquery.pagination.js"></script>
		<script>
		$().ready(function(){
   			
			//加载所有数据
			loadEmp();
			//修改员工
			$("table").on("click","button:contains('修改')",modifyEmp);
			//添加数据
			$("button:contains('添加数据')").click(function(){
   
				location.href="addemp.html";
			})
			//删除员工
			$("table").on("click","button:contains('删除')",delEmp);	
			//加载员工编号，工作，经理编号，部门名称
			loadJobMgrDeptEmpno();			
			$("button:contains('查询')").on("click",selectEmployee);
			//回到主页
			$("button:contains('回到主页')").click(function(){
   
				location.reload();
			})
			//全部选中
			$($("table").find(":checkbox")[0]).click(function(){
   
				console.log(this);
				$("table").find(":checkbox").prop("checked",$(this).prop("checked"));
			});
			
		})
		//实现分页
	/* 	$('.M-box1').pagination({
		    totalData:15,
		    showData:5,
		    coping:true,
		}); */
		
		//根据工编号，工作，经理编号，部门名称查询
		function selectEmployee(){
   
			$.ajax({
   
				type:"post",
				url:"EmployeeServlet",
				data:"state=selectEmployee&empno="+$("#sel_empno").val()+"&job="+$("#sel_job").val()+"&mgr="+$("#sel_mgr").val()+"&deptno="+$("#sel_deptno").val(),
				dataType:"json",
				success:function(data){
   
					console.log(data);
					//删除前面的数据
					$("table").children(":gt(0)").remove();
					if(data!=null){
   
						for(let values of data){
   
							$("table").append(`
									<tr>
										<td> 
										<input type="checkbox" name="" id="" value="" />
										</td>
										<td>${
     values.empno}</td>
										<td>${
     values.ename}</td>
										<td>${
     values.job}</td>
										<td>${
     values.mgr==0?"没有上级":values.mgr}</td>
										<td>${
     values.hiredate}</td>
										<td>${
     values.sal}</td>
										<td>${
     values.comm}</td>
										<td>${
     (values.dept.deptno==0)?"没有部门":values.dept.dname}</td>
										<td><button>添加</button></td>
										<td><button>删除</button></td>						
									</tr>
									
									`)
							
						}
					}else{
   
						alert("没有查到数据");
						loadEmp();
					}
					
				}
			})
		}
		
			 //加载员工编号，工作，经理编号，部门名称
		 function loadJobMgrDeptEmpno(){
   			
				$.ajax({
   
					type:"post",
					url:"EmployeeServlet",
					data:"state=selectJobMgrDeptEmpno",
					dataType:"json",
					success:function(data){
   
												
						for(let value of data[0]){
   
							$("#sel_job").append(`<option>${
     value}</option>`);
							
						}
						for(let value of data[1]){
   
							$("#sel_mgr").append(`<option value=${
     value}>${
     value==0?"无":value}</option>`);
							
						}
						for(let value of data[2]){
   
							$("#sel_deptno").append(`<option value=${
     value.deptno}>${
     value.dname}</option>`);
							
						}
						for(let value of data[3]){
   
							$("#sel_empno").append(`<option>${
     value}</option>`);
							
						}
							
						
					}
				}) 
			}
		
			//删除员工
			function delEmp(){
   
				let empno = $(this).closest("tr").children(":eq(1)").text();
				
				if(($(this).closest("tr").find(":checkbox").prop("checked"))&&confirm("是否删除？")){
   
					$.ajax({
   
						type:"post",
						url:"EmployeeServlet",
						data:"state=delEmp&empno="+empno,
						dataType:"text",
						success:function(data){
   
							if(data=="删除成功"){
   
								alert(data);
								location.reload();
							}else{
   
								alert(data);
							}
						}
					})
				}
				
			}
		//修改员工
			function modifyEmp(){
   
			//获取员工编号节点
				let empno = $(this).closest("tr").children(":eq(1)").text();
				location.href="modifyemp.html?empno="+empno;
				
			}
		//加载员工
			function loadEmp(){
   
				$.ajax({
   
					type:"post",
					url:"EmployeeServlet",
					data:"state=showAll",
					dataType:"json",
					success:function(data){
   						
						for ( var values of data) {
   						
							$("table").append(`
									<tr>
										<td> 
										<input type="checkbox" name="" id="" value="" />
										</td>
										<td>${
     values.empno}</td>
										<td class="text-uppercase">${
     values.ename}</td>
										<td>${
     values.job}</td>
										<td>${
     values.mgr==0?"没有领导":values.mgr}</td>
										<td>${
     values.hiredate==null?"1999-1-1":values.hiredate}</td>
										<td>${
     values.sal}</td>
										<td>${
     values.comm}</td>
										<td class="text-uppercase">${
     values.dept.dname==undefined?"没有部门":values.dept.dname}</td>
										<td><button class="btn btn-primary">修改</button></td>
										<td><button class="btn btn-danger"">删除</button></td>
									</tr>
									
									`)
						}
					}
				
					
				})
		}
			
		</script>
		<style type="text/css">
			body>div{
   
				margin: auto;
				width: 80%;
				text-align: center;
			}
			div>select{
   
				margin-right:20px;
			}
			div>button{
   
				margin-left:20px;
			}
			
			table{
   
				width: 100%;
				
			}
			
			
		</style>
	</head>
	<body>
		<div>
			<div><h1>员工信息表</h1></div>
			<div class="M-box1">
			
				员工编号:<select id="sel_empno">
					<option>--请选择--</option>
				</select>
				经理编号:<select id="sel_mgr">
					<option>--请选择--</option>
				</select>
				岗位:<select id="sel_job">
					<option>--请选择--</option>
				</select>
				部门:<select id="sel_deptno">
					<option>--请选择--</option>
				</select>
				<button type="button" class="btn btn-default">查询</button>
				<table border="1px" class="table table-bordered table-hover">
					<tr>
						<th> 
						<input type="checkbox" name="" id="" value="" />
						</th>
						<th>员工编号</th>
						<th>员工姓名</th>
						<th>员工职位</th>
						<th>经理编号</th>
						<th>入职日期</th>
						<th>员工薪资</th>
						<th>员工奖金</th>
						<th>部门名称</th>
						<th>添加</th>
						<th>删除</th>						
					</tr>
					
				</table>
				<button type="button" class="btn btn-default">添加数据</button>
				<button type="button" class="btn btn-default">回到主页</button>
			</div>
		</div>		
		
	</body>
</html>

2、编写修改页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<<
最低0.47元/天 解锁文章
Hoetears
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java ajax增删改查_AJAX实现数据的增删改查操作详解java后台
weixin_28728279的博客
02-13 913
这篇文章主要介绍了AJAX实现数据的增删改查操作,结合实例形式详细分析了ajax结合java后台实现数据库增删改查相关操作技巧,需要的朋友可以参考下本文实例讲述了AJAX实现数据的增删改查操作。分享给大家供大家参考，具体如下：主页：index.html编号：姓名：性别：男：女：年龄：1516171819202122232425身高：体重：编号：编号姓名性别年龄身高体重编号：编号...
七、SpringMVC--RESTful SpringMVC CRUD---实现员工信息增删改查
Adela0916的博客
12-11 413
RESTful SpringMVC CRUD 共同代码： EmployeeDao: package com.abc.springmvc.crud.dao; import java.util.Collection; import java.util.HashMap; import java.util.Map; import com.abc.springmvc.crud.entities.Department; import com.abc.springmvc.crud.entities.Employee;
Servlet+ajax+CURD实现增删改查功能程序
10-06
Servlet+ajax实现的增删改查功能程序，下载用Eclipse导入，即可运行。
ajax servlet增删改查,java servlet+Ajax用户管理完全无刷新增删改查及分页
weixin_33501348的博客
08-05 286
packagecom.dynastqin.portlet.action;importjava.io.IOException;importjavax.servlet.ServletException;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.se...
ajax servlet增删改查,Servlet ajax 文件上传和JDBC+Servler用户表增删改查
weixin_39702559的博客
08-05 271
昨天晚上帮一个妹子，应该是大二或者大三的。解决了Servlet+JDBC实现用户表的增删改查功能，当时妹子遇到的问题是文件上传和日期格式处理不太会。我让她把代码发我，我本地调试，结果发现坑很多，就是很多细节问题。不过对于初学者而言，能把项目搭建起来，做一个大概就不错了。项目代码和表都是妹子创建的，不太规范，请见谅，仅供初学者使用。用户表的增删改查请查看github的代码，本文介绍一下文件上传功能吧...
jdbc实现连接和增删改查功能
08-26
JDBC 实现连接和增删改查功能 JDBC（Java Data Base Connectivity，java 数据库连接）是一种用于执行 SQL 语句的 Java API，可以为多种关系数据库提供统一访问，它由一组用 Java 语言编写的类和接口组成。JDBC 提供...
mysql视图之管理视图实例详解【增删改查操作】
09-08
本篇文章将深入探讨如何在MySQL中创建、修改和删除视图，并进行基本的增删改查操作。 首先，创建视图是定义一个SQL查询并将其保存为一个可重复使用的对象。例如，我们可以创建一个名为`organization`的视图，展示...
SSH_EMPLOYEE.rar_SSH增删改查_SSH用户登录及增删查改_ssh_ssh 增删改查
09-20
使用SSH框架来实现用户的登录以及增删查改功能
ssm框架增删改查
02-26
List<Employee> emps = empService.findAllEmps(); bean.setCode(1); bean.setMsg(emps); } catch (Exception e) { e.printStackTrace(); bean.setCode(0); bean.setMsg(e.getMessage()); } return bean; ...
使用SQL Server数据库嵌套子查询的方法
09-11
使用SQL Server数据库嵌套子查询的方法 在本文中，我们将探索使用SQL Server数据库嵌套子查询的方法。嵌套子查询是一种强大的工具，能够帮助我们解决复杂的数据查询问题。我们将从基础知识开始，逐步深入，探索嵌...
Servlet+jsp+AJax的分页及增删改查
06-13
利用最简单易懂的方式写了一个完成的纯ajax的增删改查及分页，可以直接下载使用，方便学习，如果觉得不错，记得评论，您的评论是对我最大的支持。
Servlet+Jsp+Ajax分页增删改查
02-11
使用Servlet+Jsp+JDBC实现增删改查，前台显示界面使用JavaScript、Ajax与后台交互进行登录验证，并对查询结果实现分页、局部刷新，以及复选框(全选、反选)操作，适合Web开发的初学者
员工管理系统五：增删改员工实现
qq_45554909的博客
01-05 1275
1、添加员工实现 表单及细节优化 1、将添加员工信息改为超链接 <h2> 员工信息 <span style="float:right"> <a class=" btn btn-sm btn-success" th:href="@{/addEmp}">添加员工</a> </span> </h2> 2、编写对应的controller //查询所有员工，返回list页面 @GetMapping("/emps")
哈希表-实现节点员工信息的增删改操作
Passer-Go
05-31 255
一、哈希表的基本介绍 散列表(Hash table，也叫哈希表)，是根据关键码值(Key value)而直接进 行访问的数据结构。也就是说，它通过把关键码值映射到表中一-个位置来 访问记录，以加快查找的速度。这个映射函数叫做散列函数，存放记录的 数组叫做散列表。 数组的特点是：寻址容易，插入和删除困难； 而链表的特点是：寻址困难，插入和删除容易。 综合两者的特性，做出一种寻址容易，插入删除就用到了哈希表，哈希表最常用的一种方法就是拉链发，即数组加链表 二、哈希表实现员工案例逻辑示意图 三、代码实现和结果
employee-servlet
pearson
11-21 115
&lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.org/dtd/spring-beans.dtd"&gt; &lt;beans&gt; &lt;bean
mysql 表的增删改查_MySQL数据表的增删改查
weixin_34355977的博客
01-19 78
数据库中的数据是存储在基本表中的，所以需要先创建数据表再插入数据。创建表创建表的同时须指定表名、字段名和数据类型。语法：create table ( [, ,... ]);：表名不可与SQL关键字相同，同一个数据库中的表名不可重复。：字段名不可与SQL关键字相同，同一个表中的字段名不可重复。示例：创建employee员工信息表mysql> create table employee(-&gt...
java employee list_使用Java 8 Lambda表达式对Employee类进行操作
weixin_39632471的博客
02-17 182
packagecoffee.how.to.program.early.objects.chapter15;/*** 定义若干 Employee 实例并加入数组，* 把数组转换成 list，* 根据 Employee的Last Name 和 First Name 定义比较器。* 使用 lambda 和 stream 对 Employee 类进行操作。*/importjava.util.Arrays...
Servlet part1-FindEmpServlet
Ward_Tian的博客
11-06 143
package web; import java.io.IOException; import javax.servlet.ServletContext; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletReque...
java ajax增删改查_jsp+servlet+javabean+ajax MVC模式，增删改查，数据分页显示
weixin_34828613的博客
02-16 289
【实例简介】jsp+javabean+servlet+ajax，数据分页显示，使用SERVLET完成增删改查操作，文件、图片上传，使用smartUpload组件完成上传操作。MVC模式 非常适合初学者；【实例截图】【核心代码】jspservletajaxMVC└── MVC└── Emp_MVC├── emp.sql├── js│ └── data.js├── jsp│ ├── admin...
oracle数据库增删改查
最新发布
05-23
对于Oracle数据库，常用的增删改查操作如下： 1. 插入数据（增加）： ``` INSERT INTO table_name (column1, column2, column3, ...) VALUES (value1, value2, value3, ...); ``` 示例： ``` INSERT INTO employees (first_name, last_name, email, phone_number, hire_date, job_id, salary, commission_pct, manager_id, department_id) VALUES ('John', 'Doe', 'johndoe@email.com', '123-456-7890', '01-JAN-20', 'IT_PROG', 5000, 0.1, 100, 60); ``` 2. 更新数据： ``` UPDATE table_name SET column1 = value1, column2 = value2, ... WHERE condition; ``` 示例： ``` UPDATE employees SET salary = 6000 WHERE employee_id = 100; ``` 3. 删除数据： ``` DELETE FROM table_name WHERE condition; ``` 示例： ``` DELETE FROM employees WHERE employee_id = 100; ``` 4. 查询数据： ``` SELECT column1, column2, ... FROM table_name WHERE condition; ``` 示例： ``` SELECT first_name, last_name, salary FROM employees WHERE department_id = 60; ``` 以上是Oracle数据库的常用增删改查操作，可以根据实际需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值