jsonp接口调用for循环方式
说明:这些代码是关于摄像头开发的项目代码关于jsonp的接口调用。
前台代码jsonp代码:
1、在执行for循环时切记不能加 jsonpCallback:‘checkLogin1’.原因是,jsonp会重写window[checkLogin1].第二次请求将找不到。
2、(1)在for循环时要间隔3秒后台在连接摄像头时需要时间,
(2)间隔3秒防止jsonp: "callbackparam"有冲突个别不能显示,间隔时间开自己的业务场景自己可以设置。
//回调后,往<div>里添加数据
<div class="bb" id="shipinMushs"></div>
//开启按钮标签
<button id="much">much开启</button>
//定时器
//js里面没有thread.sleep的定时器,只能模拟一个定时器使for循环间隔停顿。
function sleep(n){
var start=new Date().getTime();//定义起始时间的毫秒数
while(true){
var time=new Date().getTime();//每次执行循环取得一次当前时间的毫秒数
if(time-start>n){//如果当前时间的毫秒数减去起始时间的毫秒数大于给定的毫秒数,即结束循环
break;
}
}
}
/* much 开启视频*/
$("#much").click(function(){
var ips = "http://192.168.xx.xx,http://192.168.xx.xx,http://192.168.xx.xx";
var name ="admin";
var password ="srit12345";
var ipt = ips.split(",");
for(var i=0;i<ipt.length;i++){
var ip =ipt[i];
playLookThreadMuch(ip,name,password);
//定时器设置停顿三秒
sleep(3000);
//setTimeout方法设置的停顿时间只有在第一次for循环时有用。
//setTimeout("playLookThreadMuch('"+ip+"'"+","+"'"+name+"'"+","+"'"+password+"')",2000);
}
});
function playLookThreadMuch(ip,name,password){
$.ajax({
url:'http://192.168.xx.xx:xxxx/SritBaseMaven/videoPort/previewAction',
type: "post",
async: false,
dataType: "jsonp",
jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
//jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来
data:{"ip":ip,"name":name,"password":password},
success: function(json) {
//回调的规则 rtsp+ip
var url = json.getPlayPath;
//删除子元素 source
//$("#shipin").empty();
//获取id=div1下的子元素的个数
var conts = $('#shipinMushs').children().length;
//alert(conts);
var number = conts + 2;
var video = "example_video_"+number; //生成video标签唯一的id值,在一个页面上不能有重复id值。
var videoDiv = "example_video_"+number+"div";
//添加内容 example_video_1
$("#shipinMushs").append(
'<div class="bb"><video id="'+video+'" class="video-js vjs-default-skin" controls preload="none" width="420" height="260" data-setup="{}">'
+'<source id="videoPlat" src="'+url+'" type="rtmp/flv"/>'
+'</video></div>');
//获取视频
var myPlayer = videojs(video);
//播放视频
myPlayer.play();
},
error: function(){alert(ip+"连接失败!!");}
});
};
后台代码jsonp代码 java:
/*
* 预览功能
* */
@RequestMapping(value="/previewAction")
public @ResponseBody JSONPObject previewLook(String callbackparam){
//=========这个地方可以根据自己的业务添加内容-start======
//=========这个地方可以根据自己的业务添加内容-end======
//生成返回值key共调用
Map<String, String> map = new HashMap<String, String>();
map.put("getPlayPath", outputFile);
return new JSONPObject(callbackparam, map);
}
}
配置:
//maven包
<!-- zhi zhuang state-->
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-core-asl</artifactId>
<version>1.9.13</version>
</dependency>
注意:还有一个要注意的地方是对自己写的接口要放行拦截器不要拦截
参考:
http://blog.csdn.net/caiwenfeng_for_23/article/details/45300739
https://www.cnblogs.com/mominger/p/4459712.html