繁体   English   中英

后端数据更改时如何发出警报?

[英]how to give an alert whenever the back-end data gets changed?

我们有像这样的简单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中还有其他方法可以实现同一目的吗?

您应该尝试使用javascript的setInterval(),它必须在几次定义中一次又一次地检查文件,例如

setInterval(function(){
   $.ajax({
        url: /info.json,
        success: function (data) {
           $('<span><b>'+data.name+'</b></span>').append('body')
        }
   });
},3000) //it will call after each 3 sec

它可能会帮助您:)

当服务器上的数据更改时,AJAX不会收到任何通知。

您可以尝试长时间轮询或类似的技术,或者(如果服务器和应用程序支持)使用websocket或HTTP / 2进行。

后者可能需要一些开发(甚至是服务器升级),具体取决于您的情况。

在上述情况下,我们是否应使用突变观察器,以便每当更改数据时,用户都会通过弹出窗口获得通知。

我已经创建了列表项,每当添加项目时,我们都会弹出窗口。 没有事件绑定到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>

您需要编写一个用于内容修改事件的函数。 您可以尝试使用以下代码:

$(document).on('DOMSubtreeModified', 'span b', function(){
    console.log("name modified");
    // add your action
})

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM