如何使用ajax刷新div？

Question

如何使用ajax刷新div？

jqueryhtmlcssajaxjsp

3

我正在开发一个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代码，不确定如何将其用于tab2，但在刷新后，我仍然看到旧数据，而不是显示最新数据。

$(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和tab1 div，只刷新container div，那么在刷新后我就能看到我的更新数据，并且它正常工作，但是如果我添加content和tab1 div并尝试刷新container div，那么它根本不起作用。所以肯定出了问题。

我怀疑这是因为我的css问题，我想在jsfiddle中展示。有人能帮我解决这个问题吗？

- AKIWEB

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Neha · Accepted Answer

首先，您试图获取test4.html，但在ajax上出现404错误，因此我使用了test（jsfiddle默认的ajax模拟）。我可以在tab1上看到更新，但是如果您在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