jquery - jQuery Ajax 更新 DIV

Question

在我的 editStatus.jsp 中，我有以下代码显示总数。现在我的要求是每 5 秒刷新一次总值

<div id = "refreshDIV" class = "span3">
        ${total}
 </div>

每 5 秒刷新一次上述 DIV "refreshDIV" 的代码是

$(document).ready(function(){
    setInterval(refreshDiv, 5000); 
});

function refreshDiv(){
$.ajax({
  url: 'editStatus.jsp',

 }).done(function() {
   //Update my DIV from editStatus.jsp
 });
}

从上面的代码请让我知道如何从 refrshDiv 函数更新我的 DIV“refreshDIV”

还请让我知道 ajax 中使用的 URL 是否正确当前页面 url editStatus.jsp ？

Answer 1

只需从 ajax 调用中获取返回的数据并将其插入到元素中：

$(document).ready(function(){
    setInterval(refreshDiv, 5000); 
});

function refreshDiv(){
    $.ajax({
        url: 'editStatus.jsp'
    }).done(function(result) {
        $('#refreshDIV').text(result);
    });
}

Answer 2

像这样更改您的功能：

function refreshDiv(){
    $.ajax({
        type: 'POST',
        url: 'editStatus.jsp',
        data: {
        },
        beforeSend:function(){},
        success:function(data){
            $('#refreshDIV').html(data);
        },
        error:function(){}
    });
}

只需确保 jsp 返回一些有效的 html。

使用它的其他一些优点可能是在发送请求之前显示加载消息，如下所示：

beforeSend:function(){
  $('#refreshDIV').html('Loading...');
}

error 如果从 jsp 中检索到错误，您可以执行相同的操作。