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

时间:2015-08-24 21:12:41

标签: html spring spring-mvc thymeleaf dynamic-html

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

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

我已阅读文档但未找到解决方案。

有什么想法吗?

由于

1 个答案:

答案 0 :(得分:0)

您可以使用th:inline这样使用JS,解释是在评论

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";
}