操作P页面中如何将两个按钮放在同一行并实现数据库操作 (jsp两个按钮在一行数据库)

在Web开发中,P(Java Server Pages)是一种比较流行的技术,它是一种基于Java的服务器端动态网页生成技术,具有灵活性、可扩展性和可重用性等优点,在企业级应用开发中得到广泛应用。在开发P页面时,经常需要在页面上添加按钮实现数据库操作,但有时我们需要将多个按钮放置在同一行上,这就需要用到一些技巧。

本文将介绍如何在P页面中将两个按钮放在同一行上,并实现对数据库进行增、删、改、查等操作,步骤如下:

之一步:创建数据库表和数据

首先需要创建一个数据库表和一些数据以供演示。假设我们创建一个名为“user”的表,包含五个字段:id、name、age、gender和eml,其中id为自增长主键。使用如下SQL语句创建表:

“`sql

CREATE TABLE user (

id INT(11) NOT NULL AUTO_INCREMENT,

name VARCHAR(50) NOT NULL,

age INT(11) NOT NULL,

gender VARCHAR(10) NOT NULL,

eml VARCHAR(50) NOT NULL,

PRIMARY KEY (id)

);

“`

然后插入一些测试数据,可以使用如下SQL语句:

“`sql

INSERT INTO user (name, age, gender, eml) VALUES

(‘Tom’, 18, ‘Male’, ‘tom@example.com’),

(‘Mary’, 20, ‘Female’, ‘mary@example.com’),

(‘Jack’, 22, ‘Male’, ‘jack@example.com’),

(‘Lucy’, 24, ‘Female’, ‘lucy@example.com’),

(‘John’, 26, ‘Male’, ‘john@example.com’);

“`

第二步:创建P页面和CSS样式表

接下来需要创建一个P页面来实现对数据库的操作,并将两个按钮放在同一行上。在此之前需要先创建一个CSS样式表来控制页面样式,例如:

“`css

.btn {

padding: 8px 16px;

border: none;

border-radius: 8px;

background-color: #008CBA;

color: white;

font-size: 16px;

}

.btn:hover {

cursor: pointer;

background-color: #006687;

}

.btn-primary {

background-color: #4CAF50;

}

.btn-danger {

background-color: #f44336;

}

“`

接下来创建一个P页面,命名为“user.jsp”,其中包括如下代码:

“`html

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding=”UTF-8″%>

User Management

User Management

<%

Class.forName(“com.mysql.jdbc.Driver”);

Connection conn = DriverManager.getConnection(“jdbc:mysql://localhost:3306/testdb?useSSL=false”, “root”, “root”);

Statement stmt = conn.createStatement();

ResultSet rs = stmt.executeQuery(“SELECT * FROM user”);

while(rs.next()) {

int id = rs.getInt(“id”);

String name = rs.getString(“name”);

int age = rs.getInt(“age”);

String gender = rs.getString(“gender”);

String eml = rs.getString(“eml”);

%>

id Name Age Gender Eml Action

<input type="hidden" name="id" value="”>

<input type="hidden" name="id" value="”>

<%

conn.close();

%>

“`

该页面包括一个表格来显示用户数据,并在每一行末尾放置了两个按钮,分别是“Edit”和“Delete”,用来编辑和删除该行数据。另外还放置了一个“Add”按钮,用来添加新用户数据。需要注意的是,在按钮样式中使用了“btn-primary”和“btn-danger”两种样式类,这是Bootstrap框架预定义的样式,可用于设置按钮颜色样式。

第三步:创建编辑和删除页面

在P页面中,当用户点击“Edit”或“Delete”按钮时,会跳转到“edit.jsp”和“delete.jsp”页面,分别用来编辑和删除该行数据。需要分别创建这两个页面,代码如下:

edit.jsp:

“`html

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding=”UTF-8″%>

Edit User

Edit User

<%

String id = request.getParameter(“id”);

Class.forName(“com.mysql.jdbc.Driver”);

Connection conn = DriverManager.getConnection(“jdbc:mysql://localhost:3306/testdb?useSSL=false”, “root”, “root”);

Statement stmt = conn.createStatement();

ResultSet rs = stmt.executeQuery(“SELECT * FROM user WHERE id=” + id);

if(rs.next()) {

String name = rs.getString(“name”);

int age = rs.getInt(“age”);

String gender = rs.getString(“gender”);

String eml = rs.getString(“eml”);

%>

<input type="hidden" name="id" value="”>

<input type="text" name="name" value="”>

<input type="text" name="age" value="”>

<input type="radio" name="gender" value="Male" >Male

<input type="radio" name="gender" value="Female" >Female

<input type="eml" name="eml" value="”>

<%

conn.close();

%>

“`

该页面包括一个表单,用于编辑用户数据。当用户访问该页面时,需要从URL参数中获取该用户的ID,查询数据库获取该用户的信息并将其填充到表单中。当用户点击“Save”按钮时,将提交表单数据到“update.jsp”页面进行更新操作;当用户点击“Cancel”按钮时,将返回到“user.jsp”页面。

delete.jsp:

“`html

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding=”UTF-8″%>

Delete User

Delete User

<%

String id = request.getParameter(“id”);

Class.forName(“com.mysql.jdbc.Driver”);

Connection conn = DriverManager.getConnection(“jdbc:mysql://localhost:3306/testdb?useSSL=false”, “root”, “root”);

Statement stmt = conn.createStatement();

ResultSet rs = stmt.executeQuery(“SELECT * FROM user WHERE id=” + id);

if(rs.next()) {

String name = rs.getString(“name”);

int age = rs.getInt(“age”);

String gender = rs.getString(“gender”);

String eml = rs.getString(“eml”);

%>

<input type="hidden" name="id" value="”>

<%

conn.close();

%>

“`

该页面也包括一个表单,用于确认用户删除操作。与“edit.jsp”页面类似,需要从URL参数中获取该用户的ID,查询数据库获取该用户的信息并显示在页面上。当用户点击“Delete”按钮时,将提交表单数据到“delete_confirm.jsp”页面进行删除操作;当用户点击“Cancel”按钮时,将返回到“user.jsp”页面。

第四步:创建添加和更新页面

在P页面中,当用户点击“Add”按钮时,会跳转到“add.jsp”页面,用来添加新用户数据;当用户编辑完用户数据后,会提交数据到“update.jsp”页面进行更新操作。需要分别创建这两个页面,代码如下:

add.jsp:

“`html

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding=”UTF-8″%>

Add User

Add User

Male

Female

“`

该页面包括一个表单,用于添加用户数据。当用户点击“Add”按钮时,将提交表单数据到“insert.jsp”页面进行插入操作;当用户点击“Cancel”按钮时,将返回到“user.jsp”页面。

update.jsp:

“`html

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding=”UTF-8″%>

Update User

Update User

<%

String id = request.getParameter(“id”);

String name = request.getParameter(“name”);

int age = Integer.parseInt(request.getParameter(“age”));

String gender = request.getParameter(“gender”);

String eml = request.getParameter(“eml”);

Class.forName(“com.mysql.jdbc.Driver”);

Connection conn = DriverManager.getConnection(“jdbc:mysql://localhost:3306/testdb?useSSL=false”, “root”, “root”);

PreparedStatement pstmt = conn.prepareStatement(“UPDATE user SET name=?, age=?, gender=?, eml=? WHERE id=?”);

pstmt.setString(1, name);

pstmt.setInt(2, age);

pstmt.setString(3, gender);

pstmt.setString(4, eml);

pstmt.setInt(5, Integer.parseInt(id));

pstmt.executeUpdate();

%>

The user has been updated.

<%

conn.close();

%>

“`

该页面用来更新用户数据。当用户提交表单数据到该页面时,需要从表单中获取该用户的信息,并执行SQL更新操作来更新数据库中对应的记录。当更新完成后,将显示一个提示信息,并提供一个“Back”按钮用于返回到“user.jsp”页面。

insert.jsp:

“`html

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding=”UTF-8″%>

Insert User

Insert User

<%

String name = request.getParameter(“name”);

int age = Integer.parseInt(request.getParameter(“age”));

String gender = request.getParameter(“gender”);

String eml = request.getParameter(“eml”);

Class.forName(“com.mysql.jdbc.Driver”);

Connection conn = DriverManager.getConnection(“jdbc:mysql://localhost:3306/testdb?useSSL=false”, “root”, “root”);

PreparedStatement pstmt = conn.prepareStatement(“INSERT INTO user (name, age, gender, eml) VALUES (?, ?, ?, ?)”);

pstmt.setString(1, name);

pstmt.setInt(2, age);

pstmt.setString(3, gender);

pstmt.setString(4, eml);

pstmt.executeUpdate();

%>

The user has been added.

<%

conn.close();

%>

“`

该页面用来添加新用户数据。当用户提交表单数据到该页面时,需要从表单中获取该用户的信息,并执行SQL插入操作来插入数据库中一条新记录。当插入完成后,将显示一个提示信息,并提供一个“Back”按钮用于返回到“user.jsp”页面。

综上所述,通过以上步骤,已经在P页面中成功完成了将两个按钮放在同一行并实现数据库操作的任务。在页面中包括了一个表格用于显示用户数据,以及“Edit”、“Delete”和“Add”按钮,可实现对用户的编辑、删除和添加操作。同时,在对数据库进行操作时,还考虑了安全、可读性和可维护性等因素,保证了程序的稳定性和易用性。

相关问题拓展阅读:

如何在jsp页面中实现点击一个提交按钮就可以将页面上的数据存储到对应的数据库中的表中

register.jsp:

这是一个注册页面

用户序号:

用户名:

时间:

发布内容:

请在这里输入您要发布的内容

adduser.jsp:

将用户信息加入数据库

“);

%>

register.jsp:

这是一个注册页面

用户序号:

用户名:

时间:

发布内容:

请在这里输入您要发布的内容

adduser.jsp:

将用户信息加入数据库

“);

%>

附加数据库操作类:

// 本类用来建立与数据库的连接

package user;

import java.sql.*;

public class dbfunction {

private static Connection con = null;

private static Statement stmt = null;

private static ResultSet rs = null;

public void connect(){

String url = “jdbc: /在这里修改数据库名

try {

Class.forName(“com.mysql.jdbc.Driver”);/在这里修改数据库,我用的是Mysql

} catch (ClassNotFoundException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

try {

con= DriverManager.getConnection(“jdbc:

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

}

public ResultSet select(String query)

{

System.out.println(query);

try {

stmt = con.createStatement();

rs = stmt.executeQuery(query);

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

return rs;

}

public void update(String upstr)

{

System.out.println(upstr);

try {

stmt = con.createStatement();

int rs = stmt.executeUpdate(upstr);

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

}

public void close()

{

try {

stmt.close();

con.close();

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

}

}

我在我的机子上做了一遍可以,你试试吧。。。

关于jsp两个按钮在一行数据库的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。


数据运维技术 » 操作P页面中如何将两个按钮放在同一行并实现数据库操作 (jsp两个按钮在一行数据库)