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

【问题标题】：updating/refreshing in html dynamically after ajax success without page reloadajax成功后动态更新/刷新html而无需重新加载页面
【发布时间】：2017-10-06 08:58:23
【问题描述】：

标题

我有一个更新部分，它在页面被调用时首先加载，然后一个定时 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>

【问题讨论】：

@Nitro.de 附加到document 没有什么意义
@charlietfl 你当然是对的。我猜我们没有足够的代码给 OP 一个很好的例子。
@Nitro.de 这并不意味着提供毫无用处的代码可以帮助任何人

标签： javascript jquery html ajax refresh

【解决方案1】：

您必须在 ajax 成功中构建您的 html 代码。 'data' 是你从 ajax 调用中得到的。

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

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

【讨论】：

【解决方案2】：

在你的 ajax 调用的成功函数中，你可以这样做：

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

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

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

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

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

【讨论】：

感谢@david，它的作用就像一个魅力，抱歉回复晚了

【解决方案3】：

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

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

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

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

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

试试吧！

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

【讨论】：