我们有这样简单的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>
让我们假设我们现在得到的名称从“约翰逊”改为“迈克尔”。
名称变更后输出Html如下：
<body>
<label> name </label>
<span><b>Michael</b></span>
</body>
每当名称被更改时我们都希望显示弹出窗口。没有事件绑定到HTML文档，如何实现这一点？
在开发人员工具中，使用break-on选项我可以调试它。在Javascript中有没有其他方法可以实现相同的功能？
我创建了列表项，每当我们添加项目时，我们都会获得弹出窗口。没有事件绑定到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>
您应该尝试使用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。
后者可能需要一些开发（甚至服务器升级），具体取决于您的情况。
我们是否应该使用变异Observer来实现上述情况，这样每当数据发生变化时，用户都会通过弹出窗口获得通知。
您需要为内容修改事件编写函数。您可以尝试使用以下代码：
$(document).on('DOMSubtreeModified', 'span b', function(){
console.log("name modified");
// add your action
})