jsp js 实现增删改查

JSP（Java Server Pages）和JavaScript是实现Web应用中常见的两种技术。JSP主要用于服务器端，而JavaScript主要用于客户端。下面我将详细介绍如何使用这两种技术实现增删改查功能，并解释相关基础概念、优势、类型、应用场景以及可能遇到的问题和解决方法。

基础概念

JSP：

JSP是一种动态网页技术标准，允许在HTML或XML等静态页面中嵌入Java代码。
它运行在服务器端，生成HTML页面后发送给客户端。

JavaScript：

JavaScript是一种脚本语言，主要用于增强网页交互性。
它运行在客户端浏览器中，可以直接操作DOM（文档对象模型）。

实现增删改查

1. 数据库连接

首先，需要在JSP页面中建立数据库连接。可以使用JDBC（Java Database Connectivity）来实现。

String url = "jdbc:mysql://localhost:3306/mydatabase";
String username = "root";
String password = "password";

try {
    Connection conn = DriverManager.getConnection(url, username, password);
    // 进行数据库操作
} catch (SQLException e) {
    e.printStackTrace();
}

2. 增加数据

在JSP页面中创建一个表单，用户可以通过表单提交数据。然后使用Java代码处理表单数据并插入数据库。

<form action="addData.jsp" method="post">
    Name: <input type="text" name="name"><br>
    Age: <input type="text" name="age"><br>
    <input type="submit" value="Add">
</form>

// addData.jsp
String name = request.getParameter("name");
int age = Integer.parseInt(request.getParameter("age"));

String sql = "INSERT INTO users (name, age) VALUES (?, ?)";
try (PreparedStatement pstmt = conn.prepareStatement(sql)) {
    pstmt.setString(1, name);
    pstmt.setInt(2, age);
    pstmt.executeUpdate();
} catch (SQLException e) {
    e.printStackTrace();
}

3. 删除数据

创建一个删除按钮，用户点击后发送请求到服务器，服务器端处理删除操作。

<a href="deleteData.jsp?id=1">Delete User 1</a>

// deleteData.jsp
int id = Integer.parseInt(request.getParameter("id"));

String sql = "DELETE FROM users WHERE id = ?";
try (PreparedStatement pstmt = conn.prepareStatement(sql)) {
    pstmt.setInt(1, id);
    pstmt.executeUpdate();
} catch (SQLException e) {
    e.printStackTrace();
}

4. 修改数据

创建一个表单用于编辑数据，用户提交表单后更新数据库。

<form action="updateData.jsp" method="post">
    ID: <input type="text" name="id" value="1"><br>
    Name: <input type="text" name="name"><br>
    Age: <input type="text" name="age"><br>
    <input type="submit" value="Update">
</form>

// updateData.jsp
int id = Integer.parseInt(request.getParameter("id"));
String name = request.getParameter("name");
int age = Integer.parseInt(request.getParameter("age"));

String sql = "UPDATE users SET name = ?, age = ? WHERE id = ?";
try (PreparedStatement pstmt = conn.prepareStatement(sql)) {
    pstmt.setString(1, name);
    pstmt.setInt(2, age);
    pstmt.setInt(3, id);
    pstmt.executeUpdate();
} catch (SQLException e) {
    e.printStackTrace();
}

5. 查询数据

使用JavaScript和AJAX技术实现动态查询，减少页面刷新。

<input type="text" id="search" placeholder="Search...">
<div id="results"></div>

<script>
document.getElementById('search').addEventListener('input', function() {
    var query = this.value;
    fetch('searchData.jsp?query=' + encodeURIComponent(query))
        .then(response => response.json())
        .then(data => {
            var resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = '';
            data.forEach(function(user) {
                var div = document.createElement('div');
                div.textContent = user.name + ' - ' + user.age;
                resultsDiv.appendChild(div);
            });
        });
});
</script>

// searchData.jsp
String query = request.getParameter("query");

String sql = "SELECT * FROM users WHERE name LIKE ?";
try (PreparedStatement pstmt = conn.prepareStatement(sql)) {
    pstmt.setString(1, "%" + query + "%");
    ResultSet rs = pstmt.executeQuery();
    List<User> users = new ArrayList<>();
    while (rs.next()) {
        User user = new User();
        user.setId(rs.getInt("id"));
        user.setName(rs.getString("name"));
        user.setAge(rs.getInt("age"));
        users.add(user);
    }
    out.print(new Gson().toJson(users));
} catch (SQLException e) {
    e.printStackTrace();
}