您的位置：首页 > Web前端 > AngularJS

AngularJs服-jsonp解决跨域问题

2017-02-15 20:05 519 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS $http跨域</title>
</head>
<!--
服务:服务是一个对象或函数，对外提供特定的功能.
内建服务:
1: $location是对原生Javascript中location对象属性和方法的封装。
2: $timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。
3: $filter在控制器中格式化数据。
4: $log打印调试信息
5: $http用于向服务端发起异步请求。
6: 同时还支持多种快捷方式如$http.get()、$http.post()、$http.jsonp。

什么是跨域: 协议，域名，端口有任何一个不同 就称之为跨域
如何解决跨域:
1 后端写代理接口，让后端去抓数据
2 与对方合作，用jsonp方式传送数据
-->
<body ng-app="App">

<div ng-controller="DemoController"> </div>
<script>
function fn(arg) {
console.log(arg);
document.write('111');
}
</script>

<!-- <script src="./jsonp.php?callback=fn"></script> -->

<script src="./libs/angular.min.js"></script>
<script src="./libs/jquery.min.js"></script>
<script>

//注意:JSONP 跟Ajax 没有本质关系 只不过是开发者用$.ajax方式使用jsonp

// 1、js方式创建josnp
// var script = createElement('script');
// script.src = url;
// var head = document.querySelector('head');
// head.appendChild(script);
//

// 2、jQuery方式
// $.ajax({
//  url: 'jsonp.php',
//  dataType: 'jsonp'
// });

// 3、angulerjs方式
var App = angular.module('App', []);
App.controller('DemoController', ['$http', '$scope', function ($http, $scope) {

$http({
url: 'jsonp.php?a=JSON_CALLBACK',
method: 'jsonp' // 采用JSONP方式
}).success(function (info) {
console.log(info);
});

}]);

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航