Thymeleaf 表更新而无需重新加载页面

Posted

技术标签:

【中文标题】Thymeleaf 表更新而无需重新加载页面【英文标题】:Thymeleaf table update without page reload 【发布时间】:2019-07-10 10:42:14 【问题描述】:

我正在使用 thymeleaf 属性渲染数据。但是我现在正在实现“搜索”按钮,并且想要在不重新加载的情况下进行。

我有属性 depatments,它从 db 渲染 List<Department> 我知道,如何通过 ajax 来实现,但是我需要用 RestController 替换属性,它会给我 JSON。 是否可以在不重新加载页面的情况下从属性中获取数据? Ajax,还是js,还是别的什么? 谢谢

【问题讨论】:

【参考方案1】:

是的,您可以通过使用片段和 ajax 来实现这一点。在你的控制器中

@GetMapping("/url")
public ModelAndView getResultBySearchKey()
    
        List<depatments> areaList= new ArrayList<>();//results from db
        ModelAndView mv= new ModelAndView("search::search_list"); 
        mv.addObject("searchList",areaList);

        return mv;
    

并在您的 search.html 中添加以下代码。并且不要忘记使用内联 javascript

function loadSearchResult()
    		
    			
    		 $.ajax(
    			  type: 'get',
    			  url: /*[[ @'/url' ]]*/,
    			
    			  success: function(data)
    				
    				  /*<![CDATA[*/
    				  
    				  
    				  $('.search_list').html(data);
    				  
    				  
    				  /*]]>*/
    				,
    			  
    			)
    			
    		
<button class="btn btn-primary btn-sm"
th:onclick="'loadSearchResult();'">Search</button>
    <div class="row">


      <div class="col-md-12 search_list">
       <div class="table-responsive" th:fragment="search_list">
         <table
         class="table  table-bordered ">
           <thead>
             <tr>
               <th>SL No.</th>
               <th>Actions</th>
               <th>Name</th>
             </tr>
           </thead>
        <tbody>
    <!-- your desired rows-->
        </tbody>

【讨论】:

以上是关于Thymeleaf 表更新而无需重新加载页面的主要内容,如果未能解决你的问题,请参考以下文章

颤振更新文本小部件变量而无需重新加载

thymeleaf 片段渲染后重新加载 javascript

Flask 动态数据更新,无需重新加载页面

更改 url 而无需重新加载页面

使用 javascript 重新加载 CSS 样式表

使用剃须刀页面调用服务器方法而无需重新加载页面