Ajax动态数据加载+video遮挡div问题解决
没有写博客的习惯，工作问题也缺少总结的机会，当再次用到的时候，已经忘记解决方案了。故而开始更新这个东西，先从想到的第一个问题开始吧。
16年12月份的时候，从事开发物联网的项目，有一个页面需要根据数据库的返回数据加载下拉框，然后根据下拉框选择的内容，实现另一个控件的联动处理。针对这个问题使用ajax方法进行解决。
jsp代码部分：
js代码部分：
function houseMonitor(id){
$("#cameraData").empty();
$.ajax({
type:"POST",
url:Gurl+'url',
data : {"id":id},
dataType: "json", //返回值类型
cache:false,
success:function(data){
if(data.monitornum=="1"){
var monitorlist = data.monitorlist;
for(var i = 0; i < monitorlist.length; i++) {
var id = monitorlist[i].id;
var name = monitorlist[i].monitorname;
var opt = "";
$("#monitorData").append(opt);
}
Mdata(data);
}else{
changeVideostatus("0");
};
},
error:function(error){
changeVideostatus("0");
}
});
}
//视频设备的处理模块
function monitorChange(){
$("#cameraData").empty();
monitorid=$("#monitorData").val();
if(monitorid!="" && monitorid != null ){
$.ajax({
type:"POST",
url: Gurl+'url',
data:{"monitorid":monitorid},
dataType: "json", //返回值类型
cache:false,
success:function(data){
Mdata(data);
},
error:function(){
changeVideostatus("0");
}
});
}
}
//处理返回的视频设备数据
function Mdata(data){
$("#cameraData").empty();
if(data.channelnum=="1"){
var channellist = data.channellist;
var iframeCamera="";
$("#cameraData").append(iframeCamera);
for(var i = 0; i < channellist.length; i++) {
var id = channellist[i].id;
var name = channellist[i].cameraname;
var opt = "
+ name + "
$("#cameraData").append(opt);
}
videoAdd(data);
}else{
changeVideostatus("0");
};
}
注：其中遇到浏览器兼容性问题，加载video的div优先于导致ul被遮挡的问题，后来的解决方案就是在ul标签之内添加iframe，提高加载摄像头数据的优先级。
解决遮挡问题的参考链接：http://bbs.anychat.cn/forum.php?mod=viewthread&tid=447&extra=&page=1