angular $http 的JSONP实例

最新推荐文章于 2021-03-19 13:17:43 发布
最新推荐文章于 2021-03-19 13:17:43 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： 随记备忘 文章标签： angular jsonp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sdaulee/article/details/81143158
版权

本文内容来自开课吧相关视频。

JSONP主要就是为了解决跨域问题。

angular中关于jsonp使用因为版本的不同而有差异，主要是1.6.4以前和以后。

1.6.4以前

<!DOCTYPE html>
<html lang="en" ng-app='test'>
<head>
	<meta charset="UTF-8">
	<title>angular 老版本 jsonp</title>
	<script src='angular-1.5.8.js'></script>
	<script>
	let mod = angular.module('test', []);

	mod.controller('main', function($scope, $http){
		$scope.word='';
		$scope.arr = [];

		$scope.$watch('word', function(){
			$http.jsonp(`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${$scope.word}&cb=JSON_CALLBACK`)
			.then(res=>{
				$scope.arr=res.data.s;
			}, ()=>{
				alert('error!!!')
			});
		})
		
	})
	</script>
</head>
<body ng-controller='main'>
	<input type="text" ng-model='word'>
	<ul>
		<li ng-repeat='a in arr'>{{a}}</li>
	</ul>
</body>
</html>

$http.jsonp(请求地址).then();

请求地址：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${$scope.word}&cb=JSON_CALLBACK

其中：wd=${$scope.word}是wd根据model中的$scope.word值

cb=JSON_CALLBACK是回调函数JSON_CALLBACK占位。

1.6.4以后

<!DOCTYPE html>
<html lang="en" ng-app='test'>
<head>
	<meta charset="UTF-8">
	<title>angular 1.6.4以后jsonp</title>
	<script src='angular.js'></script>
	<script>
		let mod = angular.module('test', []);

		mod.controller('main', function($scope, $http, $sce){
			$scope.arr = [];
			$scope.word = '';
	
			$scope.$watch('word',function(){

				let res = $sce.trustAsResourceUrl(`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${$scope.word}`);

				$http.jsonp(res,{jsonpCallbackParam:'cb'})
				.then(res=>{
					$scope.arr=res.data.s
				},()=>{
					alert('error!!!!')
				})
			});
		})
	</script>
</head>
<body ng-controller='main'>
	<input type="text" ng-model='word'>
	<ul>
		<li ng-repeat='a in arr'>{{a}}</li>
	</ul>
</body>
</html>

let res = $sce.trustAsResourceUrl(`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${$scope.word}`);

$http.jsonp(res,{jsonpCallbackParam:'cb'}) .then();

jsonp不是很安全，就引入$sce依赖。

使用$sce.trustAsResourceUrl(路径)告诉angular是安全的。

在$http.jsonp中添加{jsonpCallbackParam:'cb'}。

 

开心每一天！
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
angular 使用$http.jsonp进行跨域访问以及修改目标JSON
u012980368的专栏
10-01 1万+
昨天把皮皮书屋的遗产书籍整理好了，做了个AngularJs 的SAP, 上传到了阿里云， 主要思路是使用把皮皮书屋的xls内容转化成了JSON，然后用$http.get直接拿到数据，然后用ui-grid 展示，并且提供搜索功能。 本地一切都很好，工作很顺利，可是上传到阿里云后发现IIS不认JSON, 会报未处理.JSON类型文件的错误， 要改正这个错误需要admin权限执行一些命令， 那算
vue-resource的使用 之 this.$http.jsonp实现跨域请求（仿360搜索）
梨柚的博客
10-07 1334
使用vue-resource提供的jsonp()方法实现跨域请求。此案例模仿实现360搜索引擎的查询效果。 仿360搜索实现效果源码 实现效果 使用到的文件： vue.js vue-resource.js (上面两个文件需要自己本机存在才能运行源码，注意导入的路径。如果本地没有，可以使用相关的https://…链接引入，官网都有。) 360搜索列表.html 源码 360搜索列表.html <!DOCTYPE html> <html> <head> <m.
VUE使用this.$http.jsonp报错Uncaught in promise Response
qq_36639517的博客
07-09 4450
VUE使用this.$http.jsonp报错Uncaught in promise Responsejsonp请求原理VUE代码jsonp请求请求结果错误原因 jsonp请求原理 浏览器只对XHR(XMLHttpRequest)请求有同源请求限制，而对script标签src属性、link标签ref属性和img标签src属性没有这这种限制，利用这个“漏洞”就可以很好的解决跨域请求。JSONP就...
vue-resource的$http.jsonp方法例子
weixin_42667381的博客
04-21 2669
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
$http.jsonp跨域获取Java后台Servlet 数据
全栈软件工程师-陈征峰的博客
03-29 2568
angular如何跨域到Java的servlet获取数据
从HTTP四种POST 提交数据方式，引申JSON与JSONP区别
热门推荐
没有用户名的博客
01-02 5万+
HTTP四种POST提交方式，HTTP设置请求头，ajax设置请求头，JSON与JSONP区别，浏览器跨域报错问题修复，ajax跨域问题解决
Angular2 http jsonp的实例详解
12-09
在Angular中，如果你需要使用JSONP，你需要导入`JsonpModule`并将它添加到`imports`数组中，然后使用`Jsonp`服务的`jsonp()`方法代替`Http`服务的`get()`或`post()`方法。 总结来说，Angular2的HTTP服务是通过`...
Angular使用$http.jsonp发送跨站请求的方法
01-19
本文实例讲述了Angular使用$http.jsonp发送跨站请求的方法。分享给大家供大家参考，具体如下： Angular中使用$http.jsonp发送跨站请求的实践中，遇到了下面的一些问题： 1. 不是所有返回json格式的url都支持jsonp，...
playing_with_jsonp_and_angular
06-10
AngularJS内置了对JSONP的支持，使用`$http.jsonp()`服务可以方便地发起JSONP请求。以下是一个简单的示例： ```javascript angular.module('app', []) .controller('Ctrl', ['$http', function($http) { $...
JavaScript实例自学手册
09-17
13. **框架和库**：React、Vue、Angular等前端框架的介绍，以及jQuery等库的使用，它们简化了JavaScript开发并提高了开发效率。 通过"JavaScript实例自学手册"的学习，读者将能够构建动态网页，实现丰富的交互效果...
AngularJS中$http.jsonp跨域请求问题
hhaip
11-25 6414
AngularJS中$http.jsonp跨域请求问题，请求URL后必须加callback=JSON_CALLBACK参数
jsonp java后台_$http.jsonp跨域獲取Java后台Servlet 數據
weixin_34885009的博客
02-17 80
在移動App、移動網站或者PC Web網站中,經常會遇到Ajax跨域到后台獲取數據。今天給大家介紹在Angular.js中如何通過$http.jsonp跨域到Java后台Servlet中獲取數據。一、同源策略在web頁面的開發中我們經常會說起腳本的跨域訪問的問題，這個問題的始作俑者就是javascript語言安全限制中的同源策略(same-origin policy )所造成的。這一策略對於Ja...
angularjs jsonp php,在angular.js中解析JSONP $ http.jsonp（）响应
weixin_32026659的博客
03-19 125
小编典典更新：从Angular 1.6开始您不能再使用JSON_CALLBACK字符串作为占位符来指定回调参数值应放在何处您现在必须像这样定义回调：$http.jsonp('some/trusted/url', {jsonpCallbackParam: 'callback'})通过更改/访问/声明参数$http.defaults.jsonpCallbackParam，默认为callback注意：您...
jsonp请求（ajax与vuejs）
小灯博客
01-18 2546
ajax里的jsonp请求 > $.ajax({ type: "get", url:"http://192.168.25.116/php/urljsonp.php", dataType: "jsonp", data:{ love:"qin", url:"http://192.168.25.116:8000/package.json"
Http协议&JSONP
foxcc的专栏
01-09 479
  1、             HTTP协议 超文本传送协议HTTP是基于TCP/IP上应用层协议。HTTP报文下面是一个标准的浏览器发出的HTTP请求头 用FF访问淘宝Detail的一个HTTP请求头： GET /item.htm?id=5503555042&amp;ad_id=&amp;am_id=&amp;cm_id=&amp;pm_id= HTTP/1....
JSONP和 CORS进行跨域访问
gja586974的博客
11-16 205
ajax跨域访问测试(一) 测试时 挑选在jt-manager中的页面和数据进行ajax测试 1).页面结构如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>测试JSON跨域问题</title> <script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/j
AngularJS 用 $http.jsonp 方法跨域请求数据错误的问题
sunnygirl090403的专栏
07-20 9355
angular.module('myApp',[]).controller('test11', function test11($scope,$http) {     $http.jsonp("https://api.github.com/repos/cs1707/blog/posts?callback=JSON_CALLBACK")          .success(    
angular $inject原理
最新发布
06-03
在上面的代码中，$injector 会按照 $inject 属性中指定的依赖项名称来查找相应的服务实例，并将 $scope 和 $http 服务的实例注入到匿名函数中。 需要注意的是，$inject 属性中指定的依赖项的名称必须与需要注入依赖...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值