zoukankan      html  css  js  c++  java
  • 【Thymeleaf/jQuery】在Thymeleaf页面中引入jQuery

    本例工程下载:https://files.cnblogs.com/files/heyang78/myBank_themeleaf_jquery3.6.rar

    第一步:在resources目录下新建static目录,再在static目录里新建js目录,然后把jquery-3.6.0.min.js放进去。注意两层目录一个文件不要放错了。

    如上图所示,注意不要放错了,否则找不到文件。

    第二步:在页面上引用jQuery

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8">
    <title>Show all students</title>
    <script  type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
            alert(1);
            
            $("#showBtn").click(function(){
                alert(2);
            });
        });
    </script>
    </head>
    <body>
        <h1>Show all students using jquery.</h1>
        <button id="showBtn">Show</button>
    </body>
    </html>

    注意上面js/jquery-3.6.0.min.js之前时没有static目录的,这一点说明static目录和templates目录是Thymeleaf默认的目录,不需要明写出来。

    第三步:在ActionCtroller里做个跳转,以便转到新页面:

    @Controller
    public class ActionController {
        @Autowired
        private StudentMapper studentMapper;
    ......    
        @RequestMapping("/jqueryShowAll")
        public String showJqueryShowAllPage() {
            return "jqueryShowAll";
        }
    ......
    }

    最后,在地址栏输入http://localhost:8080/jqueryShowAll,jQuery就起作用了。

    以上四步就达成了目的,其实弄不出来主要是static目录没弄或是路径里多写了,注意调整就好。

    -END-

  • 相关阅读:
    http简记
    socket简介
    iOS代理
    ai作图小技能
    按钮切换
    关于ie8背景图片的平铺
    关于文本省略
    关于html table样式
    阿里巴巴iconfont使用方法(超级详细)
    办公电脑安装虚拟机基本就绪
  • 原文地址:https://www.cnblogs.com/heyang78/p/15234223.html
Copyright © 2011-2022 走看看