今天开发中无意发现,EasyUI使用tree生成树形结构加载居然向后台发送了两次一模一样的请求,导致加载了两次(alert("=======>")也运行了两次),先贴出代码:
js代码:
function initTree() {
$('#vl').tree({
url: treeUrl,//treeUrl为请求的url
animate: false,
lines : true,
checkbox : false,
onClick: function(node) {
nodeClick(node);
},
onLoadSuccess: function(data) {
//alert("=======>");
//此处代码省略....
}
});
}
html代码:
<div style="width: 30%; position: absolute; top: 34px; bottom: 0;">
<ul id="vl" data-options="region:'center',border: true"
class="easyui-tree">
</ul>
</div>
然后自己网上搜了一下,解决方法:
只需要把<ul id="vl" class="easyui-tree"></ul>中的class="easyui-tree"删除就可以了。
其解释为:
“html代码中利用class声明了easyui-tree,导致easyUI解析class代码的时候先解析class声明中的easyui-tree这样组件就请求了一次url;然后又调用js初始化代码请求一次url。这样导致了重复加载,解决的方法就是只用一种初始化方法来声明easyUI组件以避免重复的提交请求,即删除html中的class声明(class="easyui-tree");”
但是正如前面所说,向后台发送了两次一模一样的请求,导致加载了两次,我将initTree()方法注释掉后,后台就收不到请求,还有就是既然”easyUI解析class代码的时候先解析class声明中的easyui-tree这样组件就请求了一次url”,那它在解析时,为什么请求的url与js请求的url一样呢?
所以,我觉得应该js中的请求先执行,然后再是easyUI组件请求。。。
不管如何,经过实践,上述提供的方法确实是能够解决发送两次请求这个问题。