ajax跨域请求问题的解决方案

最新推荐文章于 2025-12-20 00:32:11 发布

原创最新推荐文章于 2025-12-20 00:32:11 发布 · 123 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#json #php #javascript #ViewUI

web 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了解决Ajax跨域请求的方法，重点介绍了JQuery提供的两种解决方案：jquery.ajaxjsonp格式和jquery.getScript方式，并通过示例代码展示了如何实现JSONP请求。

昨天在项目中需要做远程数据加载并渲染页面，本地测试，远程访问，怎么都没有数据，FF的Response永远为空，一直很是懊恼，于是放下一切，上网找资料查文档，Jquery的文档被我看穿了有木有？应该有吧。直到晚上一点才隐约意识到ajax跨域请求的问题，查看Jquery文档，里面赫然提到ajax跨域请求的解决方式，jsonp一下子出现在我眼前，于是即刻翻出Jquery的API出来研究，发现JQuery对于Ajax的跨域请求有两类解决方案，不过都是只支持get方式。分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。

API原文（摘）：如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理，根据客户端提交的callback的参数，返回一个callback(json)的数据，而客户端将会用script的方式处理返回数据，来对json数据做处理。

客户端一个小示例：

<script type="text/javascript">
$.ajax({
    type : "get",
    async:false,
    url : "http://chinese.tradingfloor.com/index.php/cycling/",
    dataType : "jsonp",
    jsonp: "callback_param",//服务端用于接收callback调用的function名的参数
    jsonpCallback:"callback_handler",//callback的function名称   
    success : function(data){
                   var str = '';
                   $.each(data, function(key, val) {
                        var race_date= val['race_date'] == null?'':val['race_date'];
                        var road = val['road'] == null?'休息日':val['road'];
                        var dis = val['distination']== null?'':val['distination']+'km';
                        var name = val['champion_name'] == null ? '':val['champion_name'];
                        if(val!=null){
                                str += "<tr><td>"+race_date+
                                "</td><td>"+road+
                                "</td><td>"+dis+
                                "</td><td>"+name+
                                "</td></tr>";    
                        }
                    });    
            races.append(str);
    },
    error:function(readyState,statusText,throwable){
            alert(readyState);
            alert(statusText);
            alert(throwable);
    }
});
</script>