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