如何通过AJAX+Javalin实现ArrayList与对应<li>无刷新删除

需要实现用户点击删除图标时，无需刷新页面，同时完成两个操作：

• 从后端Java ArrayList中移除对应条目
• 删除页面上搜索结果列表中的<li>元素
  技术栈：使用Javalin将HTML转为Java字符串渲染页面，优先采用AJAX实现。

现有可用代码 #

Code No.1（仅前端删除的AJAX） #

点击.trashIcon可删除最近的<li>元素，但未处理后端ArrayList的删除：

$(document).on("click",".trashIcon",function()    {
    $(this).closest('li').remove();
})

存在问题的代码及现象 #

1. Code No.2（Javalin路由配置）
   代码：app.post("/removeCountry", Page2TA::removeCountry());
   问题：removeCountry()方法未定义，无法运行。

2. Code No.3（Javalin路由配置）
   代码：app.post("/removeCountry", context => Page2TA.removeCountr(Context context));
   问题：方法名拼写错误（removeCountr应为removeCountry）；点击图标后跳转至无样式空白页面，函数未执行。

3. Code No.4（AJAX传参代码）
   尝试通过AJAX传递待删除国家名称到后端，但结合后端代码未实现预期功能：

<script>
    $(document).ready(function() {
        // Event listener for delete icon click
        $(document).on('click', '.delete-icon', function() {
            const countryToRemove = $(this).data('country');
            const $li = $(this).closest('li');
            $.ajax({
                type: 'POST',
                url: '/removeCountry',
                data: { country: countryToRemove },
                success: function(response) {
                    $li.remove();
                }
            });
        });
    })
</script>

4. Code No.5（后端删除函数）
   代码：

public static void removeCountry(Context context, ArrayList<String> CountryOutput)   {
    String country = context.formParam("myCountry");
    CountryOutput.remove(country);
}

问题：无法直接在Javalin Handler中传递ArrayList参数；前端AJAX传递的参数名是country，但后端用myCountry获取，参数名不匹配。

完整解决方案 #

1. 前端AJAX调整（确保参数传递与事件绑定正确） #

统一类名并确保参数传递匹配，后端处理成功后再删除DOM元素：

$(document).on("click", ".trashIcon", function() {
    const $li = $(this).closest('li');
    const countryToRemove = $li.data('country');
    $.ajax({
        type: 'POST',
        url: '/removeCountry',
        data: { country: countryToRemove },
        success: function() {
            $li.remove();
        },
        error: function() {
            alert("删除失败，请重试");
        }
    });
});

同时，Javalin渲染页面时需给每个<li>添加data-country属性：

StringBuilder html = new StringBuilder();
html.append("<ul>");
for(String country : CountryOutput) {
    html.append("<li data-country='").append(country).append("'>")
        .append(country)
        .append("<span class='trashIcon'>🗑️</span>")
        .append("</li>");
}
html.append("</ul>");

2. 后端Javalin路由与处理函数修复 #

路由配置（正确方法引用）

app.post("/removeCountry", Page2TA::removeCountry);

后端删除函数调整

解决参数传递与参数名匹配问题，以静态列表为例（多用户场景建议用会话存储）：

public static class Page2TA {
    // 单用户场景可用静态列表，多用户需改用sessionAttribute
    private static ArrayList<String> CountryOutput = new ArrayList<>();

    public static void removeCountry(Context context) {
        String country = context.formParam("country");
        if(country != null) {
            CountryOutput.remove(country);
        }
        context.status(200); // 返回成功状态码
    }
}

多用户场景下，用会话存储用户专属列表：

// 渲染页面时存入会话
context.sessionAttribute("userCountryList", CountryOutput);

// 删除函数中获取
ArrayList<String> countryList = context.sessionAttribute("userCountryList");

注意事项 #

• 确保jQuery已正确引入页面，否则AJAX无法运行
• 多用户场景禁止用静态列表，必须使用会话区分用户数据
• 后端处理完成后需返回200状态码，前端仅在成功响应后删除DOM元素

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