如何在不創建單獨的jsp的情況下刷新表格？

我有一個表和一個搜索字段，根據在搜索字段中輸入的內容刷新表的內容，並且如果在搜索字段中沒有輸入任何內容，則將加載全表。這裏當用戶點擊Go按鈕時，就會發出ajax調用。如何在不創建單獨的jsp的情況下刷新表格？

目前，我有如下兩個JSP：

主JSP

<script type="text/javascript"> 
     $(document).ready(function() { 
     $("#go-user").click(function() { 

       var userId = $('#usrId').val(); 
       alert(userId); 

       $.ajax({ 
         url: 'popUserSelect', // action to be perform 
         type: 'POST',  //type of posting the data 
         data: { userId: userId }, // data to set to Action Class 
         dataType: 'html', 
         success: function (html) { 
         alert(html); 
         $('#load-user').html(html); 
         //document.getElementById("leftDiv").innerHTML=html; //set result.jsp output to leftDiv 
         }, 
         error: function(xhr, ajaxOptions, thrownError){ 
          alert('An error occurred! ' + thrownError); 
         } 

        }); 
       return false; 
      }); 
     }); 
    </script> 
    <s:form theme="simple"> 
    User Id : <s:textfield name="userId" id="usrId" theme="simple"/> 
    <s:submit action="popUserSelect" key="Go"></s:submit> 
    </s:form> 
<div id="load-user">  
    <table width="100%"> 
     <thead> 
      <tr> 
       <th>Select</th> 
       <th>ID</th> 
       <th>Name</th> 
       <th>Role</th> 
       <th>Location</th> 
      </tr> 
     </thead> 
     <tbody> 
     <s:iterator value="userSupList" > 
      <tr> 
       <td><input type="radio" class="RadioButton" name="userRadio" value='<s:property value="USR_AMLUSERNAME"/>' /></td> 
       <td><s:property value="USR_AMLUSRID"/></td> 
       <td><s:property value="USR_AMLUSERNAME"/></td> 
       <td><s:property value="USR_ROLEID"/></td> 
       <td><s:property value="USR_LOCATIONID"/></td> 
      </tr> 
     </s:iterator> 
     </tbody> 
    </table> 
</div> 
    <input type="button" value="Submit" onclick="buttonClick('SubmitUser')"/> 
    <input type="button" value="Cancel" onclick="buttonClick('Close')"/>

刷新jsp中：

<table width="100%"> 
      <thead> 
       <tr> 
        <th>Select</th> 
        <th>ID</th> 
        <th>Name</th> 
        <th>Role</th> 
        <th>Location</th> 
       </tr> 
      </thead> 
      <tbody> 
      <s:iterator value="userSupList" > 
       <tr> 
        <td><input type="radio" class="RadioButton" name="userRadio" value='<s:property value="USR_AMLUSERNAME"/>' /></td> 
        <td><s:property value="USR_AMLUSRID"/></td> 
        <td><s:property value="USR_AMLUSERNAME"/></td> 
        <td><s:property value="USR_ROLEID"/></td> 
        <td><s:property value="USR_LOCATIONID"/></td> 
       </tr> 
      </s:iterator> 
      </tbody> 
     </table>

有什麼辦法，我能避免使用兩個jsp用於刷新和刷新同一主jsp本身上的jsp？

來源

2013-08-06 user2077648

你必須給你的表中的ID：

<table width="100%" id="myTable"> 
    ... 
</table>

和適應你的AJAX調用：

$.ajax({ 
    url: 'originalPage', // use original page here 
    type: 'POST',  
    data: { userId: userId }, 
    dataType: 'html', 
    success: function (html) { 

     // get the content of #myTable from the AJAX result 
     var tableContent = $("#myTable", html).html(); 

     // set the content of #myTable to the result of the AJAX call 
     $('#myTable').html(tableContent); 

    }, 
    error: function(xhr, ajaxOptions, thrownError){ 
     alert('An error occurred! ' + thrownError); 
    } 
});

jQuery的可以把目標作爲第二個參數，這是在$("#myTable", html)以前用的。這樣，它不會搜索當前文檔中的#myTable，而是從AJAX調用返回的文檔。

這樣的缺點是，整個原始頁面需要通過AJAX加載，雖然只有一小部分被使用。

來源

2013-08-06 09:17:52 Uooo

如何在不創建單獨的jsp的情況下刷新表格？

回答

相關問題