AngularJs 服务之jsonp解决跨域问题

最新推荐文章于 2022-01-08 18:16:18 发布

心郎

最新推荐文章于 2022-01-08 18:16:18 发布

阅读量1.6k

点赞数 1

分类专栏：前段_angularjs

本文链接：https://blog.csdn.net/u011301203/article/details/53225346

版权

前段_angularjs 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!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>

心郎

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJs 服务之jsonp解决跨域问题

AngularJS $http跨域<!-- 服务:服务是一个对象或函数，对外提供特定的功能. 内建服务: 1: $location是对原生Javascript中location对象属性和方法的封装。 2: $timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。 3: $filter在控制器中格式化数据。 4
复制链接

扫一扫

专栏目录