Question

标题

我有一个更新部分，在调用页面时首先加载，然后定时的js函数将再次查找更新，我获得了数组对象中的更新;我的问题从这里开始 - 如何动态刷新html，如果我收到5个更新，那么我想创建5张卡来显示那些，目前我只有两张卡。

<c:forEach items="${updates['updates']}" var="update" varStatus="loopCounter">
<div class="list-group-item media-list">
    <div class="media-body">
        <div class="admin-cont">
        <p>${update.title}</p>
        <p>${update.field1}</p> <p>Designation-${update.field2}</p>
            <p>
                ${update.content}
            </p>
        </div>      
    </div>
</div>
</c:forEach>


<script>
function getUpdates(){          
    $.ajax({
        url : URL,
        type : type,
        data : dataObj,
        success : function(data) {          
            //do something here to refresh and set data in html
        }
    });
}
</script>

Answer 1

在你的ajax调用的成功函数中，你可以做类似的事情：

library(ggplot2)
library(dplyr)
library(tidyr)
library(plotly)

Month_Names <- c("2010-11","2010-12",
             "2011-01","2011-02","2011-03","2011-04","2011-05","2011-06","2011-07","2011-08","2011-09","2011-10","2011-11","2011-12",
             "2012-01","2012-02","2012-03","2012-04","2012-05","2012-06","2012-07","2012-08","2012-09","2012-10","2012-11","2012-12",
             "2013-01","2013-02","2013-03","2013-04","2013-05","2013-06","2013-07","2013-08","2013-09","2013-10","2013-11","2013-12",
             "2014-01","2014-02","2014-03","2014-04","2014-05","2014-06","2014-07","2014-08","2014-09","2014-10","2014-11","2014-12",
             "2015-01","2015-02","2015-03","2015-04","2015-05","2015-06","2015-07","2015-08","2015-09","2015-10","2015-11","2015-12",
             "2016-01","2016-02","2016-03","2016-04","2016-05","2016-06","2016-07","2016-08","2016-09","2016-10","2016-11","2016-12",
             "2017-01")
Actual_volume <- c(54447,57156,
               52033,49547,58718,53109,56488,60095,54683,60863,56692,55283,55504,56633,
               53267,52587,54680,55569,60013,56985,59709,61281,54188,59832,56489,55819,
               59295,52692,56663,59698,61232,57694,63111,60473,58984,64050,54957,63238,
               59460,54430,58901,61088,60496,62984,66895,62720,65591,67815,58289,72002,
               61054,60329,69283,68002,63196,72267,71058,69539,71379,70925,68704,76956,
               65863,70494,77348,70214,74770,77480,69721,83034,76761,77927,79768,81836,
               75381)

df_data <- data.frame(Month_Names, Actual_volume) 

trendDateRange1 <- c("2010-11-01", "2017-01-31")
trendDateRange2 <- c("2012-01-01", "2012-12-31")
trendDateRange3 <- c("2013-01-01", "2013-12-31")
numoftrends <- 3

trends <- data_frame(Start = c("2010-11", "2012-01", "2013-01"),
                 End = c("2017-01", "2012-12", "2013-12"))
combined_data <- df_data %>%
                 crossing(trends) %>%
                 mutate(Month_Names = as.character(Month_Names),
TrendName = paste(Start, End, sep = "-")) %>%
filter(Month_Names >= Start,
     Month_Names <= End)


p <- ggplot(combined_data, aes(Month_Names, y = Actual_volume,
                      group = TrendName,
                      color = TrendName)) +
     geom_line() +
     labs(x=" ",y=" ") +
     labs(title = "New plot title") +
     theme(plot.title = element_text(family = "Trebuchet MS", color="blue", 
                      size=18, 
                              margin = margin(10, 0, 10, 0)),
    legend.position = "bottom",
    legend.title = element_blank(),
    axis.text.x = element_text(angle = 45, hjust = 1)
 )

print(ggplotly(p))

参考：http://api.jquery.com/append/

如果您想在插入新数据之前清除$('admin-cont').append(data);，您可以这样做：

div

参考：https://api.jquery.com/empty/

Answer 2

道歉，如果这个答案为时已晚，但我认为无论如何我都应该提到这个问题。

第一步：创建一个功能＆＃39; UpdatePage＆＃39;脚本，如果您有自己的更新脚本，请跳过此步骤。假设在加载页面时调用它。（如果＆＃39; $（文件）.ready（函数（）＆＃39;被调用）

第二步：添加一个事件侦听器以在哈希更改后清除计时器，否则您将进入竞争状态，具体取决于您是否有一个包含Angularjs的单页模板。

第3步：致电＆＃39; onGetObjSuccess＆＃39; Ajax（success）函数内部的函数，只有在ajax成功时才会起作用。

第4步：最后调用数据更新的最后一个函数，注意：＆＃39; .append（）＆＃39;将继续向您的html元素添加数据但不删除它。＆＃39; .replaceWith（）＆＃39;将自动/动态地用新数据替换旧数据。

试试吧！

<script>
function updatePage() {
  // Calling Ajax function as soon page is loaded
  window.setTimeout(getUpdates, 200); 
  var interval = window.setTimeout(updatePage, 5000);
  // Use your update function here ^ instead or simply call:
  // yourUpdateScript();

  window.addEventListener('hashchange', function() {
   //clears timer when navigating to pages
    window.clearTimeout(interval);
    console.log('#Hash change detected & Timer Cleared!!!');
  }
}
// Call again to create a loop - update page every 5 seconds
window.setTimeout(updatePage, 200);


function getUpdates(){
 var URL = 'https://example.com';       
  $.ajax({
      method: 'GET',
      async: true,
      url : URL, // Your url, for eg: https://example.com
      dataType : 'json', // if format of the file type is in json
      data : 'dataObj',
      success : onGetObjSuccess,
      error: function(jqxhr, textStatus, errorThrown) {
    }
  });
}


function onGetObjSuccess(data) {
  //Do something here to refresh and set data in html
  // This replaces old data with new one dynamically.
  $('#yourDiv_id').replaceWith(data);
  console.log(data);
}
</script>

ajax成功后动态更新/刷新html，无需重新加载页面

标题

2 个答案: