JSP+Ajax多选框筛选异常：多选时覆盖已选值求助

Hey there! The problem you're running into is that your current setup only sends one selected brand to the backend each time a checkbox is toggled, which replaces the previous results entirely. Let's adjust both your frontend JavaScript and backend JSP to handle multiple selected values properly.

Step 1: Update the Frontend JavaScript (FilterJS.js) #

Instead of sending just the single clicked checkbox value, we'll collect all currently checked brand checkboxes and send that array to the backend. We'll also adjust the uncheck logic to re-fetch results based on remaining selected brands instead of clearing everything.

$(document).ready(function() {
    // Function to handle filter submission
    function applyBrandFilter() {
        // Collect all checked brand values into an array
        var selectedBrands = $('.brand:checked').map(function() {
            return $(this).val();
        }).get();
        
        if (selectedBrands.length > 0) {
            $.ajax({
                url: "FilterAjaxDB1.jsp",
                method: "post",
                // Send the array of selected brands
                data: { brands: selectedBrands },
                success: function(data) {
                    $('#filter').html(data);
                    $('#remove').css({"border-radius":"40px"}).show().fadeIn('fast');
                }
            });
        } else {
            // No brands selected, clear results
            $('#filter').html("No brands selected");
            $('#remove').hide().fadeOut('fast');
        }
    }

    // Trigger filter when any brand checkbox changes
    $('.brand').on('change', applyBrandFilter);

    // Handle clear filter button
    $('#remove').click(function(e) {
        e.preventDefault(); // Prevent page reload
        $('.brand').prop("checked", false);
        applyBrandFilter(); // Update results after clearing
    });
});

Step 2: Update the Backend JSP (FilterAjaxDB1.jsp) #

Now we need to receive the array of selected brands, build a safe SQL query to fetch matching mobiles, and avoid SQL injection risks (never concatenate user input directly into SQL!).

<%-- Document : FilterAjaxDB1 Created on : Jan 14, 2018, 5:09:48 PM Author : Lenovo --%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page language="java" %>
<%@page import="java.util.*" %>
<%@page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="Bootstrap/bootstrap.css"/>
<title>JSP Page</title>
</head>
<body>
<div class="thumbnail">
<% 
String[] selectedBrands = request.getParameterValues("brands");
if (selectedBrands != null && selectedBrands.length > 0) {
    try {
        Class.forName("com.mysql.jdbc.Driver");
        Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/sample","root","root");
        
        // Build a placeholder string for IN clause (e.g., ?, ?, ?)
        String placeholders = String.join(", ", Collections.nCopies(selectedBrands.length, "?"));
        String sql = "SELECT * FROM mobiles WHERE b_name IN (" + placeholders + ")";
        
        // Use PreparedStatement to prevent SQL injection
        PreparedStatement pst = con.prepareStatement(sql);
        for (int i = 0; i < selectedBrands.length; i++) {
            pst.setString(i + 1, selectedBrands[i]);
        }
        
        ResultSet rs = pst.executeQuery();
        boolean hasResults = false;
        while(rs.next()) {
            hasResults = true;
            String name = rs.getString("m_name");
            String ram = rs.getString("ram");
            int p = rs.getInt("price");
            out.print(name + "<br>");
            out.print(ram + "<br>");
            out.print(p + "<br><hr>");
        }
        
        if (!hasResults) {
            out.print("No mobiles found for selected brands.");
        }
        
        rs.close();
        pst.close();
        con.close();
    } catch(Exception e) {
        out.print("Error: " + e.getMessage());
    }
} else {
    out.print("Please select at least one brand.");
}
%>
</div>
<script type="text/javascript" src="Bootstrap/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="Bootstrap/bootstrap.js"></script>
</body>
</html>

Key Improvements Explained #

• Frontend: We now gather all checked brands into an array and send that array to the backend, so the server knows all selected filters at once.
• Backend: We use PreparedStatement instead of Statement to avoid SQL injection attacks, which is critical when handling user input. We also build a dynamic IN clause to match all selected brands.
• User Experience: The clear filter button now properly resets the checkboxes and updates the results instead of just hiding content.

内容的提问来源于stack exchange，提问作者Saim Khan