写一个html 如何获取页面关闭事件的完整代码案例
时间: 2023-12-17 11:04:16 浏览: 25
以下是一个获取页面关闭事件的完整 HTML 代码案例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面关闭事件示例</title>
</head>
<body>
<h1>页面关闭事件示例</h1>
<p>在关闭本页面之前,请先输入一些内容。</p>
<textarea id="myTextarea"></textarea>
<script>
window.onbeforeunload = function() {
var text = document.getElementById("myTextarea").value;
if (text.length > 0) {
return "您的输入内容尚未保存,确定要离开本页面吗?";
}
};
</script>
</body>
</html>
```
在该示例中,我们在页面加载完成后通过 JavaScript 监听 window 对象的 onbeforeunload 事件,并在该事件中检查文本框中是否有内容,如果有内容,则返回一个提示字符串,询问用户是否确定关闭页面。在页面加载时,会显示一个文本框和一个提示信息,用户在输入一些内容后,尝试关闭页面时,会弹出一个提示框,询问用户是否确定关闭页面,如果用户选择取消,则页面不会关闭。
相关问题
帮我用jsp写一个完整的登陆注册小案例
好的,下面是一个简单的登陆注册小案例的jsp代码:
1. 注册页面 register.jsp
```html
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
</head>
<body>
<h1>注册页面</h1>
<form action="registerProcess.jsp" method="post">
<label>用户名:</label>
<input type="text" name="username" required/><br/><br/>
<label>密码:</label>
<input type="password" name="password" required/><br/><br/>
<label>确认密码:</label>
<input type="password" name="confirmPassword" required/><br/><br/>
<input type="submit" value="注册"/>
</form>
<a href="login.jsp">已有账号?去登陆</a>
</body>
</html>
```
2. 注册处理页面 registerProcess.jsp
```jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%@ page import="java.io.*" %>
<!DOCTYPE html>
<html>
<head>
<title>注册结果</title>
</head>
<body>
<%
// 获取表单提交数据
String username = request.getParameter("username");
String password = request.getParameter("password");
String confirmPassword = request.getParameter("confirmPassword");
// 判断密码和确认密码是否一致
if (!password.equals(confirmPassword)) {
out.print("密码和确认密码不一致,请重新输入!");
return;
}
// 连接数据库
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
Class.forName("com.mysql.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/test?useSSL=false";
String dbUsername = "root";
String dbPassword = "password";
conn = DriverManager.getConnection(url, dbUsername, dbPassword);
// 判断用户名是否已存在
String sql = "SELECT * FROM user WHERE username=?";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, username);
rs = pstmt.executeQuery();
if (rs.next()) {
out.print("用户名已存在,请重新输入!");
return;
}
// 插入新用户信息
sql = "INSERT INTO user (username, password) VALUES (?, ?)";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, username);
pstmt.setString(2, password);
int result = pstmt.executeUpdate();
if (result > 0) {
out.print("注册成功!");
} else {
out.print("注册失败,请稍后再试!");
}
} catch (Exception e) {
out.print("注册失败,请稍后再试!");
e.printStackTrace();
} finally {
// 关闭数据库连接
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (pstmt != null) {
try {
pstmt.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
%>
<a href="login.jsp">去登陆</a>
</body>
</html>
```
3. 登陆页面 login.jsp
```html
<!DOCTYPE html>
<html>
<head>
<title>登陆页面</title>
</head>
<body>
<h1>登陆页面</h1>
<form action="loginProcess.jsp" method="post">
<label>用户名:</label>
<input type="text" name="username" required/><br/><br/>
<label>密码:</label>
<input type="password" name="password" required/><br/><br/>
<input type="submit" value="登陆"/>
</form>
<a href="register.jsp">没有账号?去注册</a>
</body>
</html>
```
4. 登陆处理页面 loginProcess.jsp
```jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%@ page import="java.io.*" %>
<%
// 获取表单提交数据
String username = request.getParameter("username");
String password = request.getParameter("password");
// 连接数据库
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
Class.forName("com.mysql.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/test?useSSL=false";
String dbUsername = "root";
String dbPassword = "password";
conn = DriverManager.getConnection(url, dbUsername, dbPassword);
// 判断用户名和密码是否匹配
String sql = "SELECT * FROM user WHERE username=? AND password=?";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, username);
pstmt.setString(2, password);
rs = pstmt.executeQuery();
if (rs.next()) {
out.print("登陆成功!");
} else {
out.print("用户名或密码错误,请重新输入!");
}
} catch (Exception e) {
out.print("登陆失败,请稍后再试!");
e.printStackTrace();
} finally {
// 关闭数据库连接
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (pstmt != null) {
try {
pstmt.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
%>
<a href="login.jsp">返回登陆页面</a>
```
注意:以上代码仅供参考,实际使用时需要根据具体情况进行修改和完善。此外,还需要在服务器端安装并配置MySQL数据库。
你能帮我写一个PHP+数据库的项目案例吗
当然可以,以下是一个简单的PHP+MySQL项目案例:
项目名称:图书管理系统
项目简介:这是一个简单的图书管理系统,可以实现图书的基本查询、添加、修改和删除操作。
项目技术栈:PHP、MySQL、HTML、CSS、JavaScript
具体实现步骤如下:
1. 创建数据库和表
首先,我们需要创建一个MySQL数据库和一张表来存储图书信息。打开MySQL命令行或者phpMyAdmin,执行以下SQL语句:
```
CREATE DATABASE book_management;
USE book_management;
CREATE TABLE Books (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(255) NOT NULL,
author VARCHAR(255) NOT NULL,
publisher VARCHAR(255) NOT NULL,
price DECIMAL(10, 2) NOT NULL,
pub_date DATE NOT NULL
);
```
上面的SQL语句创建了一个名为`book_management`的数据库,以及一张名为`Books`的表,该表包括`id`、`title`、`author`、`publisher`、`price`和`pub_date`等字段。
2. 编写PHP代码
在服务器上搭建好PHP环境后,我们需要在网站根目录下创建一个`index.php`文件,并编写PHP代码来实现对图书信息的增删改查操作。以下是一个简单的代码示例:
```
<?php
// 连接数据库
$conn = mysqli_connect("localhost", "root", "", "book_management");
// 处理添加图书请求
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["add_book"])) {
$title = $_POST["title"];
$author = $_POST["author"];
$publisher = $_POST["publisher"];
$price = $_POST["price"];
$pub_date = $_POST["pub_date"];
$sql = "INSERT INTO Books (title, author, publisher, price, pub_date) VALUES ('$title', '$author', '$publisher', '$price', '$pub_date')";
mysqli_query($conn, $sql);
}
// 处理删除图书请求
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["delete_book"])) {
$id = $_POST["id"];
$sql = "DELETE FROM Books WHERE id=$id";
mysqli_query($conn, $sql);
}
// 处理修改图书请求
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["update_book"])) {
$id = $_POST["id"];
$title = $_POST["title"];
$author = $_POST["author"];
$publisher = $_POST["publisher"];
$price = $_POST["price"];
$pub_date = $_POST["pub_date"];
$sql = "UPDATE Books SET title='$title', author='$author', publisher='$publisher', price='$price', pub_date='$pub_date' WHERE id=$id";
mysqli_query($conn, $sql);
}
// 查询所有图书信息
$sql = "SELECT * FROM Books";
$result = mysqli_query($conn, $sql);
// 关闭数据库连接
mysqli_close($conn);
?>
<!DOCTYPE html>
<html>
<head>
<title>图书管理系统</title>
</head>
<body>
<h1>图书管理系统</h1>
<form method="post">
<h2>添加图书</h2>
<label for="title">书名:</label>
<input type="text" name="title" required><br>
<label for="author">作者:</label>
<input type="text" name="author" required><br>
<label for="publisher">出版社:</label>
<input type="text" name="publisher" required><br>
<label for="price">价格:</label>
<input type="number" name="price" step="0.01" required><br>
<label for="pub_date">出版日期:</label>
<input type="date" name="pub_date" required><br>
<button type="submit" name="add_book">添加</button>
</form>
<hr>
<table border="1">
<tr>
<th>ID</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>价格</th>
<th>出版日期</th>
<th>操作</th>
</tr>
<?php while ($row = mysqli_fetch_assoc($result)): ?>
<tr>
<td><?php echo $row["id"] ?></td>
<td><?php echo $row["title"] ?></td>
<td><?php echo $row["author"] ?></td>
<td><?php echo $row["publisher"] ?></td>
<td><?php echo $row["price"] ?></td>
<td><?php echo $row["pub_date"] ?></td>
<td>
<form method="post">
<input type="hidden" name="id" value="<?php echo $row["id"] ?>">
<button type="submit" name="delete_book">删除</button>
<button type="button" onclick="editBook(<?php echo $row["id"] ?>, '<?php echo $row["title"] ?>', '<?php echo $row["author"] ?>', '<?php echo $row["publisher"] ?>', '<?php echo $row["price"] ?>', '<?php echo $row["pub_date"] ?>')">修改</button>
</form>
</td>
</tr>
<?php endwhile; ?>
</table>
<script>
// 修改图书信息
function editBook(id, title, author, publisher, price, pub_date) {
var newTitle = prompt("请输入书名", title);
if (newTitle == null) {
return;
}
var newAuthor = prompt("请输入作者", author);
if (newAuthor == null) {
return;
}
var newPublisher = prompt("请输入出版社", publisher);
if (newPublisher == null) {
return;
}
var newPrice = prompt("请输入价格", price);
if (newPrice == null) {
return;
}
var newPubDate = prompt("请输入出版日期", pub_date);
if (newPubDate == null) {
return;
}
var form = document.createElement("form");
form.method = "post";
form.innerHTML = "<input type='hidden' name='id' value='" + id + "'>" +
"<input type='hidden' name='title' value='" + newTitle + "'>" +
"<input type='hidden' name='author' value='" + newAuthor + "'>" +
"<input type='hidden' name='publisher' value='" + newPublisher + "'>" +
"<input type='hidden' name='price' value='" + newPrice + "'>" +
"<input type='hidden' name='pub_date' value='" + newPubDate + "'>" +
"<button type='submit' name='update_book'>修改</button>";
document.body.appendChild(form);
form.submit();
}
</script>
</body>
</html>
```
在上面的代码中,我们首先通过`mysqli_connect()`函数连接到MySQL数据库,然后分别处理添加、删除和修改图书信息的请求,并在页面上显示当前所有图书的信息。当用户点击“添加”、“删除”或“修改”按钮时,会通过HTTP POST请求将数据提交到服务器端。其中,修改图书信息的操作需要动态生成一个表单并提交。
3. 运行项目
将上面的PHP代码保存为`index.php`文件,上传到服务器上,并通过浏览器访问该文件即可运行图书管理系统。用户可以在页面上添加、删除和修改图书信息。所有操作都会实时同步到MySQL数据库中。
希望这个项目案例能够对您有所帮助!