updating/refreshing 在 html 中动态 ajax 成功后无需重新加载页面

Question

标题

我有一个更新部分，它在页面被调用时首先加载，然后一个定时的 js 函数会再次查找更新，我在一个数组中获得了更新 object；我的问题从这里开始 - 如何动态刷新 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 成功构建 html 代码。 'data' 是您从 ajax 电话中得到的。

success : function(data) {          
            $('#yourDiv').append('whatever you want'); //For example
        }

您可以循环它并从 ajax 响应中抽取尽可能多的卡片。

Answer 2

在 ajax 调用的成功函数中，您可以执行以下操作：

$('admin-cont').append(data);

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

如果您想在插入新数据之前清除div，您可以这样做：

$('admin-cont').empty();

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

Answer 3

抱歉，如果这个答案为时已晚，但我认为无论如何我应该为遇到此问题的其他人提及它。

第一步：创建函数'UpdatePage'脚本，如果您有自己的更新脚本，请跳过此步骤。假设这是在加载页面时在内部调用的。（如果调用 '$(document).ready(function()' 则有效）

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

第三步：在Ajax(success)函数中调用'onGetObjSuccess'函数，只有在ajax成功时才会生效。

第 4 步： 最后调用更新数据的最后一个函数，注意：'.append()' 将继续向 html 元素添加数据，但是不删除它。 '.replaceWith()' 将用新数据替换旧数据 automatically/dynamically.

试试吧！

<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>

updating/refreshing 在 html 中动态 ajax 成功后无需重新加载页面

updating/refreshing in html dynamically after ajax success without page reload

html

javascript

ajax

jquery

refresh

标题