ajax异服务器读取json数据

前端之家收集整理的这篇文章主要介绍了ajax异服务器读取json数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

ajax读取同ip同域名的json格式的数据时候不会有任何问题,但是当读取异ip和异域名的json数据的时候,就会报错,所以必须要用jsonp方式请求:

首先代码方面:


先设定远程的地址,然后调用自己做的ajax方法

$(function(){
    	//Json link
       	var url = "<%=Config.getInstance().getPropertyAsString(Config.Key.REST_API_URL)%>/jsonp/v3/course/courseware/${ware.id}/frames?uid=5&from=0&t=89D8FA86DDE18B59&client=1";
       	getJsonData(url);
    });

//通过课程id得到该课程(对象)
function getJsonData(url) {
 	$.ajax({
        type: "get",url: url,async: false,contentType: "application/json; charset=utf-8",dataType: "jsonp",jsonp: "callback",success: function(data) {
            //alert(data);
            //alert(data.data);
            var resource = data.data;
            if (data != null) {
                rowcount = resource.length;
                if (rowcount > 0) {
                    courselist(resource,rowcount);
                }
            }
        },error: function(err) {
            alert(err);
        }
    });
}
//列出该课程(对象)的课程列表,re-对象,ro-对象的长度
function courselist(re,ro){
 //alert("come in 2"+ re + '..'+ ro);
 var html = '';
 for (var i = 0; i < ro; i++) {
 //alert(re[i].serialNumber+'....'+re[i].thumbimgUrl+'......'+re[i].resourceType);
 if(re[i].serialNumber == -1) {
 rowcount -= 1;
 continue;
 }else {
 html += '<div id="c' + re[i].serialNumber + '" class="cha normal"> '+
 '<div class="mask" id="mask' + re[i].serialNumber + '">播放中...</div> '+
 ' <div class="pic"> '+
 '<img src="' + re[i].thumbimgUrl + '" width="157" height="101" /> '+
 '<div class="category';if(re[i].resourceType=="MP4"){ html += ' video' }else if(re[i].resourceType=="JPG"){ html += ' picture' }else if(re[i].resourceType=="MP3"){ html += ' music' }; html += '" id="play' + re[i].serialNumber + '" onclick="startPlay(' + re[i].serialNumber + ',\'' + re[i].resourceType + '\',\'' + re[i].resourceUrl + '\');"></div> '+
 '</div> '+ 
 '</div>';

 if(re[i].serialNumber == 1) {
  startPlay(re[i].serialNumber,re[i].resourceType,re[i].resourceUrl);
 }
 //html += '<li><div class="dd">·</div><div class="dt">' + re[i].serialNumber + '......' + re[i].resourceType + '</a></div></li>'; 
 }
 }
 if(0< rowcount && rowcount <= 6){ 
  $(".chasf .prev").hide();
  $(".chasf .next").hide();
 $(".chasf .chas .switchshow").css("width",-rowcount*perwidth);
 }else {
  $(".chasf .prev").hide();
 }
 $('.switchshow').html(html);
 $('.switchshow div:first .mask').show();
 $('.switchshow div:first .picture').css("display","none");
}

最后记得在存有json数据的服务器中改请求方式是:

jsonp: "callback",
------!如果不出效果,依照错误提示慢慢调,我也是调了半天才调通的,不是一下子就会有数据的!

猜你在找的Ajax相关文章