使用Jquery获取Thymeleaf参数的三种方式小结

 更新时间:2024年07月30日 10:04:25   作者:成为大佬先秃头  
在使用Thymeleaf进行数据填充的时候,发现使用jquery原始方式获取内容参数发现拿不到数据,本文主要介绍了使用Jquery获取Thymeleaf参数的三种方式小结,感兴趣的可以了解一下

在使用Thymeleaf进行数据填充的时候,发现使用jquery原始方式获取内容参数发现拿不到数据。将百度后看到的解决方案整理下来,仅供参考。

方法一:内联获取

<script>标签中 th:inline 一定不能少,通常在取值的前后会加上不同的注释,不过个人觉得这样子写太麻烦了这么多括号!

<p th:text="#{message}">default message</p>
<script th:inline="javascript">
    var message = [[${message}]];
    console.log(message);
</script>

方法二:隐藏域获取

将参数放到隐藏域中在获取

<p th:value="#{message}" type="hidden" id="data">default message</p>
//获取隐藏域里面的参数
<script  type="text/javascript">
    var data=${"#data"}.val();
    var data=$("#data").val();
</script>

方法三:text文本获取

<p th:text="#{message}" id="data"></p>
<script  type="text/javascript">
    var bankCard1=$("#data").text();
</script>

Jquery获取thymeleaf中checkbox的值

实现

thymeleaf页面代码

 <button id="printBtn"  class="btn btn-info  mb_1em" type="button" onclick="return printDetails()"><i class="fa fa-paste"></i> 打印</button>
            <table id="wmsInOrderDetail_table_id"  class="table  table-bordered hover" style="width:100%">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>托盘编号</th>
                    <th>物料编号</th>
                    <th>物料名称</th>
                    <th>数量</th>
                    <th>供应商批次</th>
                    <th>生产日期</th>
                    <th>状态</th>
                </tr>
                </thead>
                <tbody >
                <tr th:each="orderlist:${wmsReceiveOrderDetailsVOList}"  >
                    <td>
                    <input type="checkbox"
                           class="ads_Checkbox"
                           th:text="${orderlist.id}"
                           th:value="${orderlist.id}" name="checkedid"/>
                    </td>
                    <td th:text="${orderlist.salverCode}"></td>
                    <td th:text="${orderlist.materielId}"></td>
                    <td th:text="${orderlist.materielName}"></td>
                    <td th:text="${orderlist.num}"></td>
                    <td th:text="${orderlist.supplierBatch}"></td>
                    <td th:text="${#dates.format(orderlist.productDate, 'yyyy-MM-dd HH:mm:ss')}"></td>
                    <td th:text="${orderlist.statusName}"></td>
                </tr>
                </tbody>
            </table>

选中数据后,点击打印按钮,来到js中的方法。

function printDetails(){
    debugger
    var checkID = [];//定义一个空数组
    $("input[name='checkedid']:checked").each(function(i){//把所有被选中的复选框的值存入数组
        checkID[i] =$(this).val();
    console.log(checkID);
    });
   
}

到此这篇关于使用Jquery获取Thymeleaf参数的三种方式小结的文章就介绍到这了,更多相关Jquery获取Thymeleaf参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • Jqprint实现页面打印

    Jqprint实现页面打印

    本文主要介绍了Jqprint实现页面打印的具体方法,并提供了Jqprint插件下载。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 原生和jQuery的ajax用法详解

    原生和jQuery的ajax用法详解

    Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写)。现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。这篇文章主要介绍了原生和jQuery的ajax用法,需要的朋友参考下吧
    2017-01-01
  • jQuery实现按钮点击遮罩加载及处理完后恢复的效果

    jQuery实现按钮点击遮罩加载及处理完后恢复的效果

    这篇文章主要介绍了jQuery实现按钮点击遮罩加载及处理完后恢复的效果,涉及jQuery与asp.net后台交互实现页面效果动态变换的相关技巧,需要的朋友可以参考下
    2016-06-06
  • JQueryiframe页面操作父页面中的元素与方法(实例讲解)

    JQueryiframe页面操作父页面中的元素与方法(实例讲解)

    这篇文章主要是对JQueryiframe页面操作父页面中的元素与方法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • jQuery 查找元素操作实例小结

    jQuery 查找元素操作实例小结

    这篇文章主要介绍了jQuery 查找元素操作,结合实例形式总结分析了jQuery针对页面元素的各种常见查找操作实现方法,需要的朋友可以参考下
    2019-10-10
  • jQuery学习笔记之控制页面实现代码

    jQuery学习笔记之控制页面实现代码

    每一段jQuery对应一段html代码,以标记为准则,css为共用代码,每段代码需独立运行。html和css代码在文章尾部,如下例
    2012-02-02
  • jquery淡入淡出效果简单实例

    jquery淡入淡出效果简单实例

    这篇文章主要介绍了jquery淡入淡出效果简单实现方法,以完整实例形式分析了jQuery中fadeIn及fadeOut实现淡入淡出的相关技巧,需要的朋友可以参考下
    2016-01-01
  • jQuery1.9+中删除了live以后的替代方法

    jQuery1.9+中删除了live以后的替代方法

    这篇文章主要介绍了jQuery1.9+中删除了live以后的替代方法 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • jQuery实现垂直半透明手风琴特效代码分享

    jQuery实现垂直半透明手风琴特效代码分享

    这是一款jquery hover抽屉式导航图片展开收缩切换特效代码,用户还可以自定义对应幻灯片的标题与文字说明,是一款非常实用的幻灯片特效源码。
    2015-08-08
  • JQuery 遮罩层实现(mask)实现代码

    JQuery 遮罩层实现(mask)实现代码

    用过ExtJs的可能知道在ExtJs中集成了很多的UI元素可以很方便我们的使用。
    2010-01-01

最新评论