1. 程式人生 > >jsonp解決跨域請求問題

jsonp解決跨域請求問題

src="url?callback=function"

url後面跟著?代表第一個引數開始, &代表and(連結符) 也就是後面要再加引數.

callback代表引數,後臺定義的引數名稱,後面函式是自己寫的回撥函式。

JS中:

JS方法一:

<script type="text/javascript">
    function jsonpCallback(result) {
//console.log(result);  
for(var i in result) {
    console.log(i + ":" + result[i]); //迴圈輸出a:1,b:2,etc.  
}
    }
    var JSONP = document.createElement("script");
    JSONP.type = "text/javascript";
    JSONP.src = "url?callback=jsonpCallback";
    document.getElementsByTagName("head")[0].appendChild(JSONP);
</script>

JS方法二: 

<script type="text/javascript">  
    function jsonpCallback(result) {  
        console.log(result);
        for(var i in result) {  
            alert(i+":"+result[i]);//迴圈輸出a:1,b:2,etc.  
        }  
    }  
</script>  
<script type="text/javascript" src="url?callback=jsonpCallback"></script>

Jquery中:

$.getJSON

<script type="text/javascript">  
    $.getJSON("url?callback=?",  
    function(result) {  
        for(var i in result) {  
            alert(i+":"+result[i]);//迴圈輸出a:1,b:2,etc.  
        }  
    });  
</script>  

$.ajax:

<script type="text/javascript">  
    $.ajax({  
        url:"url",  
        dataType:'jsonp',  
        data:'',  
        jsonp:'callback',  
        success:function(result) {  
            for(var i in result) {  
                alert(i+":"+result[i]);//迴圈輸出a:1,b:2,etc.  
            }  
        },  
        timeout:3000  
    });  
</script>  

$.get

<script type="text/javascript">  
    $.get('url?callback=?', {name: encodeURIComponent('tester')}, function (json) { for(var i in json) alert(i+":"+json[i]); }, 'jsonp');  
</script>  

Angularjs中:

方法一:

$http.jsonp("url?callback=JSON_CALLBACK").success(function(data){
  $scope.todo=data;
  console.log(data);
});
方法二:
$http({
    method: 'JSONP',
    url: 'url?callback=JSON_CALLBACK',
}).success(function(data) {
    console.log(data);
});