Tip*_*tan 1 html javascript ajax jquery
这是HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="js/jquery.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="SomeDiv"></div>
</body>
</html>
这是'script.js'的内容:
$(function() {
function load_text() {
$.get('test.html').done(function(data) {
// Check this condition below.
if ($.trim($("#SomeDiv").html()).length != $.trim(data).length){
$("#SomeDiv").html(data);
}
});
}
setInterval(load_text, 2000);
});
这是'test.html'的内容:
<div>Hello World!</div>
上面的test.html只有那行代码.因此,每当AJAX加载时,它将返回相同的HTML并反复填充DIV标记.根据if条件,#SomeDiv中的HTML和加载的HTML在第一次之后将不相等它应该是相等的并且不应该重新填充DIV.
但似乎即使在第一次加载后长度也不同.这只是打击了我!怎么可能？我正在加载相同的内容然后我从另一个文件中获取相同的内容并与之前加载的内容进行比较但它们不相等...
这是正常的,还是有其他方法可以让它在第一次加载后没有填充DIV？
我想要做的是如果加载的内容不同,那么显示它,否则不显示它.
注意:您是(前编辑)修剪length由于不正确的包围:)
您正在将原始文本字符串与"结构化"HTML进行比较(在将解析元素添加到DOM并且空白可以更改之后).
试着比较喜欢与像(首先转换为DOM元素):
// Need to wrap the incoming elements in a parent
var $data = $('<div>').html(data);
if ($.trim($("#SomeDiv").html()).length != $.trim($data.html()).length)