1

我有一个表和一个搜索字段，根据在搜索字段中输入的内容刷新表的内容，如果在搜索字段中没有输入任何内容，则加载完整的表。在这里，当用户单击 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？

4

1 回答 1

0

你必须给你的桌子一个 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-06T09:17:52.907 回答