您的位置:首页 > Web前端 > JavaScript

ajax异服务器读取json数据

2015-03-11 12:06 411 查看
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",


------!如果不出效果,依照错误提示慢慢调,我也是调了半天才调通的,不是一下子就会有数据的!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: