jsonp接口调用for循环方式

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.youkuaiyun.com/caiwenfeng_for_23/article/details/45300739

https://www.cnblogs.com/mominger/p/4459712.html