如何使用ajax刷新刷新div？

Posted 2023-03-05

【中文标题】如何使用ajax刷新刷新div？

【英文标题】：How to refresh div using ajax refresh?

【发布时间】：2014-04-23 13:35:53

【问题描述】：

我正在开发 spring mvc 控制器项目，在该项目中我将数据从控制器传递到 jsp。我的jsp页面有水平标签设计，点击每个标签后，我都在显示表格。

目前我的设计中只有两个标签。当我点击TEST1 标签时，它会显示Table1，但如果我点击TEST2 标签，它会显示另一个具有不同列和数据的表格Table2，它工作正常。

这是我的jsfiddle。

这是我的 test4.jsp 设计 -

<div id='headerDivDash'>
    <h1 id='topHeaderDash'>
        some_image
    </h1>
</div>

<ul id="tabs">
    <li><a href="#" name="tab1">TEST1</a></li>
    <li><a href="#" name="tab2">TEST2</a></li>
</ul>

<div id="content"> 
    <div id="tab1">
        <h2>Test 1</h2>
        <div class="container">
            <c:forEach var="e" items="$testing.machines">
                <div class="component">
                    <h3>
                        For
                        <c:out value="$e.key" />
                    </h3>
                    <table class="overflow-y">
                        <thead>
                            <tr>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Address</th>
                                <th>Email</th>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach var="m" items="$e.value">
                                <tr>
                                    <th>$m.fName</th>
                                    <td class="color-changer">$m.lName</td>
                                    <td>$m.address</td>
                                    <td>$m.email</td>
                                </tr>
                            </c:forEach>
                        </tbody>
                    </table>
                </div>
            </c:forEach>
        </div>

    </div>
    <div id="tab2">
            <h2>Test 2</h2>

        <div class="container">
            <c:forEach var="e" items="$testing.machines">
                <div class="component">
                    <h3>
                        For
                        <c:out value="$e.key" />
                    </h3>
                    <table class="overflow-y">
                        <thead>
                            <tr>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Address</th>
                                <th>Email</th>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach var="m" items="$e.value">
                                <tr>
                                    <th>$m.fName</th>
                                    <td class="color-changer">$m.lName</td>
                                    <td>$m.address</td>
                                    <td>$m.email</td>
                                </tr>
                            </c:forEach>
                        </tbody>
                    </table>
                </div>
            </c:forEach>
        </div> 
    </div>
</div>
<div class="footer">&copy Some value</div>

我正在将数据从控制器传递到 jsp 页面。现在我想做的是-

我想使用 AJAX 刷新每 30 秒刷新一次 tab1 div 和 tab2 div 两个标签。 另外，如果我在TEST1 选项卡上，然后正在刷新，那么它应该在TEST1 选项卡上，但假设我在TEST2 选项卡上，然后正在刷新，那么它应该在TEST2 标签上。

以下是我为 tab1 刷新而想出的 jquery刷新。

$(document).ready(function()
    // Create overlay and append to body:
    $('<div id="overlay"/>').css(
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: $(window).height() + 'px',
        opacity:0.4, 
        background: 'lightgray url(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif) no-repeat center'
    ).hide().appendTo('body');

    // Execute refresh with interval:
    setInterval(refresh, 30 * 1000);
);

//Create a refresh function:
function refresh()
    // SHOW overlay
    $('#overlay').show();
    // Retrieve data:
    $.ajax(
        url: 'test4.jsp',
        type: 'GET',
        success: function(data)
            var content =  $($.parsehtml(data)).filter("#tab1");
            //Replace content inside the div
            $('#tab1').replaceWith(content); # this is not updating my tab div with latest data
            // HIDE the overlay:
            $('#overlay').hide();
        
    );

我根本看不到我的tab1 div 正在刷新。我可以看到刷新图像出现，但不知何故 tab1 总是保存我第一次看到点击 url 的旧数据。我的 jquery 有什么问题吗？

我还注意到一件很奇怪的事情，如果我删除 content div and tab1 div 并刷新 container div 然后我可以在刷新后看到我更新的数据并且它工作正常但是如果我添加 content and tab1 div 并尝试刷新container div，那么它根本不起作用。所以肯定有问题..

我怀疑这是因为我的 css 问题而发生的，我猜这在 jsfiddle 中显示。

谁能帮我解决这个问题？

【参考方案1】：

首先，当您尝试获取在 ajax 上给出 404 错误的 test4.html 时，我使用测试（jsfiddle 默认 ajax 模型）。我可以在 tab1 上看到关于 tab2 的更新，如果您在 ajax 成功时替换“#tab1”中的内容，它将不会更新 tab2 内容。

第二次不要使用replaceWith()，这将替换整个元素，所以下次不会有id="tab1"的div元素..而是使用这个..

        if( $("#tabs li:first").attr("id") ==="current")
        $('#tab1').html("dummy content 1");
        
        else  $('#tab2').html("dummy content 2");  

Fiddle DEMO

【讨论】：

谢谢内哈。在您的示例中，在我的示例中，我将用什么代替虚拟 content 1 和 dummy content 2？因为我需要在两个选项卡中加载container div。有什么想法吗？

你的ajax返回是什么？它的返回容器 div 或 html 内容是否在容器 div 内更新？

我猜唯一的问题是因为container div。您所做的方式是替换任何东西的最简单方法。就我而言，问题出在容器 div 上。

在我的示例中，我需要在我拥有的两个选项卡中重新加载 container div。

所以你 ajax 返回完整的结构 html 或只返回数据 .. 如果你告诉我什么是 ajax o/p 我可能会帮助你。