jsp操作MySQL实现查询/插入/删除功能示例
直接贴代码吧：
首先，index_test.jsp页面的代码如下：
代码如下:
<%@ page language="java" pageEncoding="utf-8"%>
<%@ page contentType="text/html;charset=utf-8"%>
<%
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>人员操作</title>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<style>
#popDivAdd,#popDivDelete {
position: absolute;
visibility: hidden;
overflow: hidden;
border: 2px solid #AEBBCA;
background-color: #EEF1F8;
cursor: move;
padding: 1px;
}
#popTitle {
background: #9DACBF;
height: 20px;
line-height: 20px;
padding: 1px;
}
#popForm {
padding: 2px;
}
.title_left {
font-weight: bold;
padding-left: 5px;
float: left;
}
.title_right {
float: right;
}
#popTitle .title_right a {
color: #000;
text-decoration: none;
}
#popTitle .title_right a:hover {
text-decoration: underline;
color: #FF0000;
}
</style>
<script>
function showPopup(type) {//弹出层
//var objDiv = null;//objDiv是目标div
if(type == 'add'){
objDiv = document.getElementById("popDivAdd");
}
else
if(type = 'delete'){
objDiv = document.getElementById("popDivDelete");
}
objDiv.style.top = "50px";//设置弹出层距离上边界的距离
objDiv.style.left = "200px";//设置弹出层距离左边界的距离
objDiv.style.width = "300px";//设置弹出层的宽度
objDiv.style.height = "220px";//设置弹出层的高度
//objDiv.style.display = "block";
objDiv.style.visibility = "visible";
}
function hidePopup(type) {//关闭层
//var objDiv = null;//objDiv是目标div
if(type == 'add'){
objDiv = document.getElementById("popDivAdd");
}
else
if(type = 'delete'){
objDiv = document.getElementById("popDivDelete");
}
objDiv.style.visibility = "hidden";
}
</script>
</head>
<body>
<!-- 表单div -->
<form action="insert_test.jsp" method="post">
<p>
ID :<input type="text" name="id" value="0" /></br>
姓名:<input type="text" name="name" value="" /></br>
性别:<input type="text" name="sex" value="" /></br>
年龄:<input type="text" name="age" value="" /></br>
</p>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<input type="reset" value="取消" onclick="hidePopup('add')" />
</form>
</div>
</div>
<div id="popDivDelete"><!-- 删除人员的div -->
<div id="popTitle"><!-- 标题div -->
<span class="title_left">删除人员</span> <span class="title_right">
<a href="#" onclick="hidePopup('delete');">关闭</a> </span>
</div>
<div id="popForm"><!-- 表单div -->
<form action="delete_test.jsp" method="post">
<p>
ID :<input type="text" name="id" value="" /> </br>
姓名:<input type="text" name="name" value="" /> </br>
</p>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<input type="reset" value="取消" onclick="hidePopup('delete')" />
</form>
</div>
</div>
<p>
<input name="" type="button" onclick="location.href = 'query_test.jsp'" value="查询" />
<input name="" type="button" onclick="showPopup('add')" value="添加" />
<input name="" type="button" onclick="showPopup('delete')" value="删除" />
</p>
<script type="text/javascript">
/*-------------------------鼠标左键拖动---------------------*/
/*--------当不需要实现此功能时，可以将这一部分代码删除------------*/
var objDiv = document.getElementById("popDiv");
var isIE = document.all ? true : false;//判断浏览器类型
document.onmousedown = function(evnt) {//当鼠标左键按下后执行此函数
var evnt = evnt ? evnt : event;
if (evnt.button == (document.all ? 1 : 0)) {
mouseD = true;//mouseD为鼠标左键状态标志，为true时表示左键被按下
}
}
objDiv.onmousedown = function(evnt) {
objDrag = this;//objDrag为拖动的对象
var evnt = evnt ? evnt : event;
if (evnt.button == (document.all ? 1 : 0)) {
mx = evnt.clientX;
my = evnt.clientY;
objDiv.style.left = objDiv.offsetLeft + "px";
objDiv.style.top = objDiv.offsetTop + "px";
if (isIE) {
objDiv.setCapture();
//objDiv.filters.alpha.opacity = 50;//当鼠标按下后透明度改变
} else {
window.captureEvents(Event.MOUSEMOVE);//捕获鼠标拖动事件
//objDiv.style.opacity = 0.5;//当鼠标按下后透明度改变
}
}
}
document.onmouseup = function() {
mouseD = false;//左键松开
objDrag = "";
if (isIE) {
objDiv.releaseCapture();
//objDiv.filters.alpha.opacity = 100;//当鼠标左键松开后透明度改变
} else {
window.releaseEvents(objDiv.MOUSEMOVE);//释放鼠标拖动事件
//objDiv.style.opacity = 1;//当鼠标左键松开后透明度改变
}
}
document.onmousemove = function(evnt) {
var evnt = evnt ? evnt : event;
if (mouseD == true && objDrag) {
var mrx = evnt.clientX - mx;
var mry = evnt.clientY - my;
objDiv.style.left = parseInt(objDiv.style.left) + mrx + "px";
objDiv.style.top = parseInt(objDiv.style.top) + mry + "px";
mx = evnt.clientX;
my = evnt.clientY;
}
}
</script>
</body>
</html>
<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="utf-8"%>
<%@ page contentType="text/html;charset=utf-8"%>
<%
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=utf-8");
%>
<html>
<body>
<%
Connection con=null;
String url="jdbc:mysql://localhost/html_db?user=root&password=123456";
//html_db为数据库名
Class.forName("org.gjt.mm.mysql.Driver").newInstance();//新建实例
Connection conn= DriverManager.getConnection(url);//建立连接
Statement stmt=conn.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE);
String sql="select * from person_tb";
ResultSet rs=stmt.executeQuery(sql);
while(rs.next()) {%>
ID：<%=rs.getString("id")%> </br>
姓名：<%=rs.getString("name")%></br>
性别：<%=rs.getString("sex")%></br>
年龄：<%=rs.getString("age")%></br></br>
<%}%>
<%out.print("恭喜你!数据库操作成功！ ");%>
<%
rs.close();
stmt.close();
conn.close();
%>
</br>
<input name="" type="button" onclick="location.href = 'index_test.jsp'" value="返回" />
</body>
</html>
insert_test.jsp页面代码如下：
<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="utf-8"%>
<%@ page contentType="text/html;charset=utf-8"%>
<%
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=utf-8");
%>
<htnl>
<head>
<title>往数据库插入数据</title>
</head>
<body>
<%
String id=request.getParameter("id"); //从表单获得
String name=request.getParameter("name"); //从表单获得
String sex=request.getParameter("sex"); //从表单获得
String age=request.getParameter("age"); //从表单获得
try
{
/** 连接数据库参数 **/
String driverName = "com.mysql.jdbc.Driver"; //驱动名称
String DBUser = "root"; //mysql用户名
String DBPasswd = "123456"; //mysql密码
String DBName = "html_db"; //数据库名
String connUrl = "jdbc:mysql://localhost/" + DBName + "?user=" + DBUser + "&password=" + DBPasswd;
Class.forName(driverName).newInstance();
Connection conn = DriverManager.getConnection(connUrl);
Statement stmt = conn.createStatement();
stmt.executeQuery("SET NAMES UTF8");
String insert_sql = "insert into person_tb values('" + id + "','" + name + "','" + sex + "','" + age + "')";
String query_sql = "select * from person_tb";
try {
stmt.execute(insert_sql);
}catch(Exception e) {
e.printStackTrace();
}
try {
ResultSet rs = stmt.executeQuery(query_sql);
while(rs.next()) {
%>
ID：<%=rs.getString("id")%> </br>
姓名：<%=rs.getString("name")%> </br>
性别：<%=rs.getString("sex")%> </br>
年龄：<%=rs.getString("age")%> </br> </br>
<%
}
}catch(Exception e) {
e.printStackTrace();
}
//rs.close();
stmt.close();
conn.close();
}catch (Exception e) {
e.printStackTrace();
}
%>
</br>
<input name="" type="button" onclick="location.href = 'index_test.jsp'" value="返回" />
</body>
</html>
<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="UTF-8"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
%>
<htnl>
<head>
<title>删除人员</title>
</head>
<body>
<%
String id=request.getParameter("id"); //从表单获得
String name=request.getParameter("name"); //从表单获得
try
{
/** 连接数据库参数 **/
String driverName = "com.mysql.jdbc.Driver"; //驱动名称
String DBUser = "root"; //mysql用户名
String DBPasswd = "hel610"; //mysql密码
String DBName = "html_db"; //数据库名
String connUrl = "jdbc:mysql://localhost/" + DBName + "?user=" + DBUser + "&password=" + DBPasswd;
String query_sql = "select id,name,sex,age from person_tb";
String delete_sql = "";
Class.forName(driverName).newInstance();
Connection conn = DriverManager.getConnection(connUrl);
Statement stmt = conn.createStatement();
try{
if(id != null && id != ""){
out.println("删除了id=" + id + "的人。</br></br>");
delete_sql = "delete from person_tb where id=" + id;
}
else if(name != null && name != ""){
out.println("删除了name=" + name + "的人。</br></br>");
delete_sql = "delete from person_tb where name='" + name + "'";
}else{
out.println("请至少输入ID、姓名中的一个！</br></br>");
}
}catch(Exception e){
e.printStackTrace();
}
try {
stmt.execute(delete_sql);
}catch(Exception e){
e.printStackTrace();
}
try {
ResultSet rs = stmt.executeQuery(query_sql);
while(rs.next()) {
%>
ID：<%=rs.getString("id")%>
</br> 姓名：<%=rs.getString("name")%>
</br> 性别：<%=rs.getString("sex")%>
</br> 年龄：<%=rs.getString("age")%>
</br>
</br>
<%
}
}catch(Exception e) {
e.printStackTrace();
}
//rs.close();
stmt.close();
conn.close();
}catch (Exception e) {
e.printStackTrace();
}
%>
</br>
<input name="" type="button" onclick="location.href = 'index_test.jsp'" value="返回" />
</body>
</html>
在浏览器直接访问index_test.jsp页面，点击删除按钮，填入ID或者姓名之中的任何一个并提交即可进行删除： 
执行删除前（下左图）、后（下右图）数据库的内容显示为： 
总的来说，查询、插入与删除的功能都实现了。
现在发现的问题是：本来是实现的是弹出层的位置是可以移动的，但现在移动不了了，具体原因在于鼠标拖动部分的第一句代码：var objDiv = document.getElementById("popDiv");即指定拖动对象时，没有指定好。正在找方法解决。有谁有比较好的方法，请帮下忙吧，多谢了！
相关推荐
-
jsp中文乱码 jsp mysql 乱码的解决方法
jsp中文乱码 jsp mysql 乱码要servlet里面支持中文的方法: 在dopost或者doget的第一句加上: request.setCharacterEncoding("GB2312"); response.setCharacterEncoding("GB2312"); jsp乱码问题在jsp里面就把 <%@ page contentType="text/html; charset=gb2312" language="
-
JSP MySQL插入数据时出现中文乱码问题的解决方法
当向 MySQL 数据库插入一条带有中文的数据形如 insert into employee values(null,'张三','female','1995-10-08','2015-11-12','Sales',2000,'是个好员工!'); 出现乱码时,可以使用语句 show variables like 'character%'; 来查看当前数据库的相关编码集. 从上图中可以看到 MySQL 有六处使用了字符集,分别为:client .connection.database.results
-
Linux下进行MYSQL编程时插入中文乱码的解决方案
插入中文是乱码,尝试了许多方法,比如我先把vim里设置为:set fileencoding=utf-8不起作用,后来想想也对,和vim没什么关系 然后就尝试c#代码,用Encoding.UTF8.GetString()方法,后来也不对. 我就郁闷了,忽然想起来莫不是mysql的设置问题??? 于是,sudo nano /etc/mysql/my.cnf 插入下面红色代码,default-character-set = utf8,成功,不乱码了~~~根本不用什么Encoding..... # Th
-
JSP 连接MySQL配置与使用
一.软件下载 直接到MySQL官网下载以下两个工具:mysql-5.1.32-win32.msi.mysql-gui-tools-5.0-r17-win32.msi 前者是MySQL的安装文件,后者是MySQL Tool安装文件,包括JDBC. 二.环境配置 把mysql-connector-java-5.0.4-bin.jar从MySQL\MySQL Tools for 5.0\java\lib拷贝到D:\Tomcat 6.0\lib下,然后在classpath里面加入D:\Tomcat 6.
-
MySQL插入中文不乱码的5种方法
方法一: 登录MySQL,先做 set names latin1 ,然后在更新语句或者执行SQL语句 mysql> set names latin1; mysql> source test.sql; 方法二: 在SQL文件中指定set names latin1;然后登录MySQL,执行相应文件 [root@localhost ~]# cat test.sql set names latin1; insert *****************; mysql> source test.sq
-
JSP+ MySQL中文乱码问题post提交乱码解决方案
写了两个jsp页面index.jsp和mysql_insert.jsp.数据处理流程为:在浏览器(chrome)上访问index.jsp后在其表单上输入数据,提交至mysql_insert.jsp,mysql_insert.jsp首先将接收到的数据按变量存入MySQL的html_db数据库的person_tb中(该表原有部分数据),然后mysql_insert.jsp再拿出该表中所有数据显示在mysql_insert.jsp页面上. 现在发现,当提交的数据中含有中文(比如变量姓名的值为中文)时,
-
C# mysql 插入数据,中文乱码的解决方法
有两种解决办法: 一种是在执行语句前面设置,如: 复制代码 代码如下: MySQLCommand mCommand = new MySQLCommand("set names gb2312", m_Connection); 另一种是直接加在连接字符串里,如: 复制代码 代码如下: <add name="connection" connectionString="server=127.0.0.1;UId=root;PassWord=root;Persi
-
jsp连接MySQL实现插入insert操作功能示例
下午终于实现了jsp连接MySQL执行插入操作的功能.在index.jsp页面输入数据,提交到mysql--insert.jsp页面进行插入数据库的操作. index.jsp页面代码如下: 复制代码 代码如下: <%@ page language="java" pageEncoding="utf-8"%> <%@ page contentType="text/html;charset=utf-8"%> <%
-
jsp和servlet操作mysql中文乱码问题的解决办法
首先看是从什么地方开始出现的乱码,只要统一编码,就不会出现乱码,下面以uft-8(个人认为最好)为例,详细说明: 1.如果乱码是从jsp页面出现的,jsp头部页面加上:<%@ page language="java" pageEncoding="UTF-8" %>在head标签中加上标签. 2.如果乱码是在servlet中出现的,则有两种方法:一种是在每个servlet中doget和doPost方法头部加上request.setCharacterEnco
-
如何使用JSP访问MySQL数据库
<%@page import="java.sql.*" import ="java.util.*" import ="java.io.*" contentType="text/html; charset=gb2312" %> <html> <head> <title>使用MYsql数据库</title> <meta name="GENERATOR&qu