javascript - 刷新页面的特定部分

Question

我目前有一个模式可以从我的数据列表中删除一个项目。选择删除后，我想刷新网页。此时，它正在刷新整个页面并将我重定向到 Searches 选项卡。我只想刷新 Lists 选项卡。我该怎么做？

我的 HTML:

<div class="row zero-margin">
        <div class="col-xs-12">
            <div id="tabstrip">
                <ul id="tab-strip-options">
                    <li id="listItem1" class="k-state-active">
                        Searches
                    </li>
                    <li id="listItem2">
                        Lists
                    </li>
                </ul>
                <div class="saved-search-content">
                    <div id="gridSearch"></div>
                </div>
                <div class="saved-list-content">
                    <div id="gridList"></div>
                </div>
            </div>
        </div>
    </div>

我的 JavaScript 函数:

function deleteItemsFromList(data) {
    if(data.IsSuccess) {
        window.location.reload();
        CloseModal("deleteSearchListModal");
        showSuccessMessage('List was successfully deleted!');
    }
}

Answer 1

服务器端数据存储的解决方案:

在您的网页上进行部分更新的最简单解决方案是使用 AJAX 请求。更新时，您必须从 Web 源加载列表内容。

$( "#gridList" ).load( "ajax/getListContent" );

当然，您的 ajax/getListContent 必须生成适当的 HTML 子结构(没有 html、body 标签)，例如:

<div>...</div>

通常在地址 ajax/getListContent 上创建一个数据源，它返回你的 HTML 结构化数据，然后在你的代码中你可以这样做:

function deleteItemsFromList(data) {
    if(data.IsSuccess) {
        $( "#gridList" ).load( "ajax/getListContent", function() {
           CloseModal("deleteSearchListModal");
           showSuccessMessage('List was successfully deleted!');
        }
    }
}