thymeleaf（二）点击事件

最新推荐文章于 2025-07-06 15:47:48 发布

winner_corl

最新推荐文章于 2025-07-06 15:47:48 发布

阅读量1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： thymeleaf

本文链接：https://blog.youkuaiyun.com/Sicily_winner/article/details/79726832

thymeleaf 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在Thymeleaf中如何结合Ajax进行页面交互。重点强调了Thymeleaf模板中jQuery代码的位置必须在section内才能生效，并给出了使用Ajax传输数据以及处理返回整个页面的例子。同时，提到了后台接收参数时可能遇到的问题，如areaCode为null，可通过@RequestParam或@ModelAttribute注解来解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意使用了thymeleaf模板jquery要写在section里面，不然没有效果呢！！！！

ajax是用来传输数据的如果说是返回整个页面是

window.location.href="接口地址?传输参数名称="+等到的web页面值;

<section>
    <script>
        $('.aaa').click(function(){
            alert(222)
        })
    </script>
</section>

原图

点击查找触发接口

<div class="grop-botton">
            <button type="submit" class="b-search"><i></i>查找</button>
            <button type="reset" class="b-reset"><a th:href="@{'/setting/empList'}"><i></i>重置</a></button>
</div>

或者引入外部js文件

<div class="pull-right top-button">
        <button type="button" class="b-add"><i></i>xxx</button>
        <button type="button" class="b-delete" onclick="delSelectEmp();" value="0"><i></i>xxx</button>
    </div>

js如下

<script>
    $('.b-search').click(function () {
        var test = $(this).text();
        alert(test);
    })
</script>

完整版本：返回页面

 <script>
        $('.b-search').click(function () {
            var areaCode = $(this).text();//this效果类同与$('.b-search').text()
            alert(areaCode);
            window.location.href="/customer/myChannel?areCode="+areaCode;
        })

    </script>

现在后台要接受参数了，可能会出现areaCode传入是null的情况

可以加

@RequestParam或者@ModelAttribute 标签接收参数