如何在不创建单独的jsp的情况下刷新表

How to refresh a table without creating a separate jsp?

本文关键字：jsp 情况下 刷新 单独 创建      更新时间：2023-09-26

我有一个表和一个搜索字段，根据搜索字段中输入的内容刷新表的内容，如果搜索字段中没有输入任何内容，则加载整个表。在这里，当用户单击Go按钮时，就会进行ajax调用。

目前，我有两个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？

您必须给您的表一个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加载，尽管只使用了其中的一小部分。

相关文章：