Issue with AJAX-based Dynamic Dependent Dropdowns: "Error loading subcategories" in JSP and Servlet Setup

I'm trying to create a set of dynamic dependent dropdown menus with jQuery and AJAX. The dropdowns should show categories, subcategories, and further subcategories. However, I'm encountering an issue where the error message "Error loading subcategories" appears after selecting a category, and I can't seem to identify what's causing it.

I've written JavaScript, a JSP page, and a Java servlet for handling the dropdowns. Here’s what I have so far:JavaScript Code (for handling dropdowns)

The JavaScript sends AJAX requests to a servlet based on the selected option, expecting JSON responses with the corresponding data:

$(document).ready(function () {    $.ajax({        url: "GetSubcatFsubcatServlet",        method: "GET",        dataType: "json",        data: { operation: 'cat' },        success: function (data) {            $.each(data, function (key, value) {                $('#cat').append('<option value="'+ value.cat_id +'">'+ value.cat +'</option>');            });        },        error: function () {            alert('Error loading categories.');        }    });    $('#cat').change(function () {        let cid = $('#cat').val();        $('#subcat').empty().append('<option>Υποκατηγορία</option>');        $('#further_subcategory').empty().append('<option>Υποκατηγορία-2</option>');        $.ajax({            url: "GetSubcatFsubcatServlet",            method: "GET",            dataType: "json",            data: { operation: 'subcat', id: cid },            success: function (data) {                $.each(data, function (key, value) {                    $('#subcat').append('<option value="'+ value.subcat_id +'">'+ value.subcat +'</option>');                });            },            error: function (jqXHR, textStatus, errorThrown) {                console.log("Error loading subcategories:", textStatus, errorThrown, jqXHR.responseText);                alert('Error loading subcategories: '+ errorThrown);            }        });    });    $('#subcat').change(function () {        let sid = $('#subcat').val();        $('#further_subcategory').empty().append('<option>Υποκατηγορία-2</option>');        $.ajax({            url: "GetSubcatFsubcatServlet",            method: "GET",            dataType: "json",            data: { operation: 'fsubcat', id: sid },            success: function (data) {                $.each(data, function (key, value) {                    $('#further_subcategory').append('<option value="'+ value.fsubcat_id +'">'+ value.fsubcat +'</option>');                });            },            error: function () {                alert('Error loading further subcategories.');            }        });    });});

JSP Code

The JSP page includes dropdown menus that are populated based on the user’s selections.

<select id="cat" name="cat_id" class="form-select"><option value="">Κατηγορία</option></select><select id="subcat" name="subcat_id" class="form-select"><option value="">Υποκατηγορία</option></select><select id="further_subcategory" name="fsubcat_id" class="form-select"><option value="">Υποκατηγορία-2</option></select>

Java Servlet

The GetSubcatFsubcatServlet servlet handles requests for categories, subcategories, and further subcategories.

public class GetSubcatFsubcatServlet extends HttpServlet {    @Override    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        response.setContentType("application/json; charset=UTF-8");        response.setCharacterEncoding("UTF-8");        try (PrintWriter out = response.getWriter()) {            String opt = request.getParameter("operation");            if ("cat".equals(opt)) {                ArrayList<Category> categories = new GetAllCategories(con).getCategories();                out.write(new Gson().toJson(categories));            } else if ("subcat".equals(opt)) {                String subcatIdParam = request.getParameter("subcat_id");                Long subcatId = Long.parseLong(subcatIdParam);                ArrayList<SubCategory> subcategories = new GetSubcategoriesByID(con).getSubcatByID(subcatId);                out.write(new Gson().toJson(subcategories));            } else if ("fsubcat".equals(opt)) {                String fsubcatIdParam = request.getParameter("fsubcat_id");                Long fsubcatId = Long.parseLong(fsubcatIdParam);                ArrayList<FurtherSubcategory> furtherSubcategories = new GetFurtherSubcategoriesByID(con).getFSubcatByID(fsubcatId);                out.write(new Gson().toJson(furtherSubcategories));            } else {                response.setStatus(HttpServletResponse.SC_BAD_REQUEST);                out.write("{\"error\": \"Invalid operation parameter.\"}");            }        } catch (NumberFormatException e) {            response.setStatus(HttpServletResponse.SC_BAD_REQUEST);            LOGGER.log(Level.SEVERE, "Invalid ID format", e);        } catch (Exception e) {            response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);            LOGGER.log(Level.SEVERE, "Error processing request", e);        }    }}

Problem:

When selecting a category, I receive the following message: "Error loading subcategories." The error occurs in the AJAX error function, but the exact cause isn’t clear. I've checked that the category data loads correctly in the initial AJAX call, but the subcat retrieval fails.