无需重新加载页面即可更新胸腺叶表-前端问题

Thymeleaf table update without page reload(无需重新加载页面即可更新胸腺叶表)

本文介绍了无需重新加载页面即可更新胸腺叶表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在呈现具有胸腺叶属性的数据。但我现在正在执行"搜索"按钮，并且希望不用重新加载。我具有从数据库呈现List<Department>的属性depatments 我知道如何通过AJAX做到这一点，但随后我需要用RestController替换属性，后者会给我JSON。是否可以在不重新加载页面的情况下从属性获取数据？AJAX，或者js，或者其他什么？谢谢

推荐答案

可以，您可以使用Fragment和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;
    }

并在您的earch.html中添加以下代码。别忘了使用内联脚本。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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>

这篇关于无需重新加载页面即可更新胸腺叶表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！