查詢數據庫並在同一頁面顯示結果

Question

我目前正在研究spring框架。我在頁面abc.jsp上有一個按鈕，它向我的控制器發送一個GET請求。控制器在DAO中調用一個方法，並返回一個包含數據的列表並將其轉發給def.jsp。當我們單擊按鈕時，是否有方法直接在abc.jsp上顯示數據表。在我的研究中，我發現AJAX是一種方法。我之前沒有使用AJAX，我不知道如何使用它，因爲我需要獲取一個列表。任何幫助，將不勝感激。我已在下面附加了我的代碼所需的片段。在此先感謝，

abc.jsp

<form action="abcd" method="get"> 
      <button type="submit" onclick="startSpin()">Items in ABCD</button> 
</form> 

控制器代碼

@Controller 
@RequestMapping("application") 
public class ApplicationController { 

    @Autowired 
    AppDAO AppDAO; 

    private static final Logger LOGGER = LoggerFactory.getLogger(MasterDataObjectEntityController.class); 

    @RequestMapping (value="/abcd",method=RequestMethod.GET) 
    public String getItemsInABCD(ModelMap map, HttpServletRequest req){ 
     LOGGER.info("ApplicationController :: ");  
     try { 
      map.addAttribute("ItemsInABCDList", AppDAO.getItemsInABCDList()); 
     } catch (SQLException e) { 
      LOGGER.error("ApplicationController :: getItemsInABCDList:: SQLException ::"+e.getMessage()); 
     } 
     return "def"; <-- goes to def.jsp 
    } 
} 

def.jsp

<table class="table table-bordered table-striped table-hover" 
         id="mytable" style="width: 95%;"> 

         <thead> 
          <tr style="font-weight: bold;"> 

           <td>col 1</td> 
           <td>col 2</td> 

          </tr> 
         </thead> 
         <tbody> 
          <c:forEach var="myvar" items="${ItemsInABCDList}"> 
           <tr> 
            <td>${myvar.itemNumber}</td> 
            <td>${myvar.itemName}</td> 
           </tr> 

          </c:forEach> 
         </tbody> 
        </table> 

<script type="text/javascript"> 

var mytable= null; 
$(document).ready(function() { 
    mytable= $('#mytable').dataTable(
      { 
       //columnDefs: [ { orderable: false, targets: [0] }] 
       columnDefs: [{ 
        targets: "datatable-nosort", 
        orderable: false 
       }] 
      }); 

      $('[data-toggle="tooltip"]').tooltip(); 

     }); 
</script> 

Answer 1

你需要對代碼進行小的修改。如果可行。 您可以使用的Javascript函數來調用Axaj請求與任何POST/GET

通話createAjaxRequest功能與請求的URL即ABCD，還可以指定你的回調funtion名即yourCallbackFuncationName

createAjaxRequest("abcd",yourCallbackFuncationName); 

function createAjaxRequest(requestURL,callbackFuncation){ 
    var xmlhttp; 
    startStopLoader(true); 
    if (window.XMLHttpRequest){ 
     xmlhttp=new XMLHttpRequest(); 
    } else { 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function(){ 
     if (xmlhttp.readyState==4){ 

      if(xmlhttp.status == 200){ 
       try{ 
        callbackFuncation(xmlhttp.responseText); 
       }catch(e){ 

       }    
      } 

     } 
    } 
    xmlhttp.open("GET",requestURL,true); 
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
} 

function yourCallbackFuncationName(response) { 
     // you can manupulate your list stored in response variable 
     // you can generate your tr/td here and put it back in your main 
      table using innerHTML 
} 

而且您需要在java文件中使用@ResponseBody並返回項目列表。這可能看起來像下面的代碼

@RequestMapping (value="/abcd",method=RequestMethod.GET) 
@ResponseBody 
    public ItemsInABCDListBean getItemsInABCD(ModelMap map, HttpServletRequest req){ 
     LOGGER.info("ApplicationController :: ");  
     try { 
      ItemsInABCDListBean ItemsInABCDList = AppDAO.getItemsInABCDList(); 
     } catch (SQLException e) { 
      LOGGER.error("ApplicationController :: getItemsInABCDList:: SQLException ::"+e.getMessage()); 
     } 
     return ItemsInABCDList; // returns List you want to show 
    } 

希望這會幫助你。它可能是您的應用程序的通用代碼