html - thymeleaf + Spring 中的动态 html 页面基于下拉菜单中的选定选项

Question

我正在使用 Spring 框架和 Thymeleaf 开发一个 Web 应用程序。

我创建了一个下拉菜单，但我希望在选择下拉菜单中的某个选项时显示页面上的其他内容。选择是指单击菜单中的选项时，仅此而已。我不是指完整的表单提交。

我已经阅读了文档，但没有找到解决方案。

有任何想法吗？

谢谢

Answer 1

你可以像这样使用 JS th:inline，解释在评论中

JS代码

<script th:inline="javascript">
    //Declare the URL of RequestMapping to use
    //Do no change format

    /*[+
     var urlToload = [[@{/path/spring}]];
     var anotherUrlToUse = [[@{/another/url?param=}]];
     +]*/

    //Handle you jquery event             
    $('body').on('click', '.dropdown-menu', function (e) {
        var t = $(this);
        //Sending your ajax request
        $.ajax({
            url: urlToload,
            method: 'POST',
            data: {
                optionSelected: t.val()
            }
        })
        /**
         * Execute when your request is done
         * @param {type} data : the page result of your Request                 * 
         */
        .done(function (data) {
            $("#receiver").html(data);
        })
        //Execute on fail
        .fail(function (xhr, ajaxOptions, thrownError) {
            console.log("ERROR");
            //Use anotherUrlToUse with GET METHOD to redirect
            window.location.replace(anotherUrlToUse+404);
        });
    });
</script>

控制器代码

@RequestMapping(value = "/path/spring", method = RequestMethod.POST)
public String controllerMethod(Model model, @RequestParam("optionSelected") String optionSelected) {
    /**
     * Do your job
     * Your code
     */
    return "page/result";
}