jsonp解決跨域請求問題
阿新 • • 發佈:2019-02-11
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);
});