jsonp跨域问题【主要解决的是返回状态码是200，但是js脚本仍然是执行error模块问题】

最新推荐文章于 2025-03-11 10:15:16 发布

buster2014

最新推荐文章于 2025-03-11 10:15:16 发布

阅读量2w

点赞数

分类专栏： JSON相关

本文链接：https://blog.youkuaiyun.com/buster2014/article/details/50463671

版权

JSON相关专栏收录该内容

12 篇文章

订阅专栏

我jsonp的坑在这里：

最终发现后台传回来的数据是这样的

参照此文章跨域请求之jQuery的ajax jsonp的使用解惑 http://www.cnblogs.com/know/archive/2011/10/09/2204005.html解决问题，

原因是返回的数据中不能有" "，正确返回的数据是这样的，如下图所示：

概述：

1、首先要了解什么是域？

2、为什么要跨域，跨域能解决什么问题？

3、jsonp

4、jsonp支持POST请求吗？不支持，只支持GET请求，除非其他办法，未知

5、jquery对jsonp的支持

6、ajax 和jsonp 不是一码事细读详解http://blog.youkuaiyun.com/superhosts/article/details/9057301

什么是域，简单来说就是协议+域名或地址+端口，3者只要有任何一个不同就表示不在同一个域。跨域，就是在一个域中访问另一个域的数据。

如果只是加载另一个域的内容，而不需要访问其中的数据的话，跨域是很简单的，比如使用iframe。但如果需要从另一个域加载并使用这些数据的话，就会比较麻烦。为了安全性，浏览器对这种情况有着严格的限制，需要在客户端和服务端同时做一些设置才能实现跨域请求。

JSONP简介
JSONP（JSON with Padding）是一种常用的跨域手段，但只支持JS脚本和JSON格式的数据。顾名思义，JSONP是利用JSON作为垫片，从而实现跨域请求的一种技术手段。其基本原理是利用HTML的<script>标签天生可以跨域这一特点，用其加载另一个域的JSON数据，加载完成后会自动运行一个回调函数通知调用者。此过程需要另一个域的服务端支持，所以这种方式实现的跨域并不是任意的。

JQuery对JSONP的支持
JQuery的Ajax对象支持JSONP方式的跨域请求，需要像此文章http://www.jb51.net/article/75768.htm【此文章有自己实现jsonp，可以学习】说的，必须加上crossDomain: true,否则报错。

自己完整jquery框架中的js实现jsonp跨域请求并处理返回值：【仅供参考，标红字段必须含有】：

注意：后台传回来的数据必须是回调函数名(json格式数据) 切记"回调函数名(正确的json格式数据)" 返回这种格式数据一定是错误的，不能有双引号

后台repsonse设置【标注紫红的两个参数必须设置，一个是响应类型，另一个是允许所有ip访问】：

def rep(value)://进入的value已经是json格式的数据
    print value,'<------------->response'
    response = HttpResponse(value)
    response.__setitem__("Content-Type", "text/plain")
    response.__setitem__("Access-Control-Allow-Origin", "*")
    return response

js脚本截图：

<script type="text/javascript">
        function loadData() {
        	$.ajax({
                type:"GET",//请求方式:GET
                async :false,//是否异步：否
                cache:false,//是否缓存：否
                timeout: 200,//请求超时响应：200s
                url: "http://localhost:8000/dataservice/APPINSTALL",//请求url
                data: {"cid":"test","ssk":"c8ff727c44cc49e9093f487cf022cdcb568b82f6"},//请求参数
                dataType:"jsonp",//数据类型：jsonp
                crossDomain: true,//是否跨域:是
                jsonp: "callback",//callback或者jsoncallback或者jsonpcallback;传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
                jsonpCallback: "my",//自定义jsonp回调函数名称,可以随意起名，或者根据项目规范命名,默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据;ruo自定义的函数名是js中的function会执行下面函数function
                complete: function() {
                    //hideLoadingMsg(); // 数据获取完成后，需要做的事，此为隐藏读取数据的滚动条。
                },
                success: function (json) {//请求成功：此处传回来的数据为：my({'msg': 'OK', 'code': 0, 'data': {'appinstall': '2000'}})
		            if (json.msg=='OK' && json.code == "0") {
		            	var html=JSON.stringify(json.data);
	                    $("#result").html(html);
		            }
		            else {
		                //显示错误信息
		                //var errorMessage = json.errors;
		                //alert(errorMessage);
		            }
       		 },
		         error: function (XMLHttpRequest, textStatus, errorThrown) {//请求异常：网络断开或者
		            alert("请求数据异常，状态码：" + XMLHttpRequest.status);
		         }
            });
        }
        function OnGetMemberSuccessByjsonp(data) {
            alert(data);
            //if(o.data) alert(eval(o.data));//在eval执行一次回调函数
			//else{//o为实际返回的JSON对象了
		      //alert(o.statuses[0].created_at)
   		   // }
        }
        function jsonp(data){
            return data;
        }

        $(document).ready(function(){
            loadData();
        });

    </script>

==============================

调用其他公司已经实现的API，完成音乐播放功能(包括获取音乐列表和音乐，有代码供下载)

jQuery+JSONP通过调用虾米接口实践

http://caibaojian.com/jquery-jsonp-xiami-api.html