时间戳

首页 > 解决方案 > 如何在后端数据发生更改时发出警报？

javascript - 如何在后端数据发生更改时发出警报？

问题描述

我们有这样的简单 json

{
    name: "Johnson"
}

我正在使用 ajax 显示如下名称

$.ajax({
    url: /info.json,
    success: function(data) {
        $('<span><b>' + data.name + '</b></span>').append('body')
    }
});

输出 Html 如下

<body>
    <label> name </label>
    <span><b>Johnson</b></span>
</body>

让我们假设我们现在得到的名字从“Johnson”变成了“Michael”。

名称更改后输出 Html 如下：

<body>
    <label> name </label>
    <span><b>Michael</b></span>
</body>

每当更改名称时，我们都希望显示弹出窗口。没有事件绑定到 HTML 文档，如何实现？

在开发人员工具中，使用中断选项我可以调试它。Javascript中还有其他方法可以实现相同的目标吗？

标签： javascriptjqueryjsonajaxecmascript-5

解决方案

我已经创建了列表项，每当我们添加项目时，我们都会得到弹出窗口。没有事件绑定到 DOM。我通过使用 Mutation 观察器实现了这一点。

<!DOCTYPE html>
<head>
</head>
<body>
<ol contenteditable oninput="">
  <li>Enter the items</li>
</ol>
<script>
  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
  var list = document.querySelector('ol');

  var observer = new MutationObserver(function(mutations) {  
    mutations.forEach(function(mutation) {
      if (mutation.type === 'childList') {
        var list_values = [].slice.call(list.children)
            .map( function(node) { return node.innerHTML; })
            .filter( function(s) {
              if (s === '<br>') {
                return false;
              }
              else {
                return true;
              }
         });
        alert(list_values);
      }
    });
  });

  observer.observe(list, {
    attributes: true, 
    childList: true, 
    characterData: true
  });
</script>
</body>
</html>

推荐阅读