angular中的jsonp记录
angular的正常机制采用引入$http服务的形式进行 get post等的访问。但是在跨域访问的时候就需要采用jsonp了。
不废话,直接上示例和引用原文地址:
比如访问地址为
http://url
需要再上边的 url后边加上 callback=JSON_CALLBACK
即访问地址形式为:
http://url?callback=JSON_CALLBACK
此访问的意思是告诉服务器端需要获取我的 callback (key),然后采用对应的key值对应的value JSON_CALLBACK (字符串)
进行返回,jsonp 这边会将返回的内容作为一个js表达式进行调用。
即服务器那边放回形如 return "JSON_CALLBACK("+ jsonData +")"; 的内容。
这边直接进行调用,当然你js的这边需要提供好对应的方法,既然你传递过去了 JSON_CALLBACK 那么就声明一个
JSON_CALLBACK全局方法吧。
即 function JSON_CALLBACK(){//your code
}
好吧,上边说的其实是一般的方法,在angular里边按照这么进行调用的话,其实请求的地址是形如(可以在debug模式中的network中进行查看)
http://url?callback=angular.callbacks._0
所以在返回的时候就要将对应的 JSON_CALLBACK 进行更改了。
即服务器端需要返回 return "angular.callbacks._0("+ jsonData +")"; 的内容
最后写一下就是, 服务器只要按照上边进行返回的话,那么就直接在success中进行调用了~ 我的是这个样子的,欢迎大家分享沟通。
$http.jsonp(url).success(function(data){
console.log(data);
});
附上stackoverflow(真是个好网站)参考地址:
原文地址:http://stackoverflow.com/questions/12066002/parsing-jsonp-http-jsonp-response-in-angular-js
angular中的jsonp记录的更多相关文章
- Angular中的jsonp
1.一般我们使用Angualr中的jsonp值这样使用的:注入$http服务 这样使用jsonp的方式可以支持多数api,但是douban不支持无法使用 module.controller('InTh ...
- 使用Cors在WebApi中实现跨域请求,请求方式为angular的 $http.jsonp
使用Cors在WebApi中实现跨域请求 第一步,在webapi项目中安装cors 在Web API配置文件中(Global.asax)进行全局配置: public class WebApiAppli ...
- Angular 中的数据交互(get jsonp post)
一.Angular get 请求数据 Angular5.x 以后 get.post 和和服务器交互使用的是 HttpClientModule 模块. 1.在 app.module.ts 中引入 并注入 ...
- angular 中父元素ng-repeat后子元素ng-click失效
在angular中使用ng-repeat后ng-click失效,今天在这个上面踩坑了.特此记录一下. 因为ng-repeat创造了新的SCOPE.如果要使用这个scope的话就必须使用$parent来 ...
- angular源码分析:angular中脏活累活的承担者之$interpolate
一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配 ...
- 形象的讲解angular中的$q与promise(转)
以下内容摘自http://www.ngnice.com/posts/126ee9cf6ddb68 promise不是angular首创的,作为一种编程模式,它出现在……1976年,比js还要古老得多. ...
- angular源码分析:angular中的依赖注入式如何实现的
一.准备 angular的源码一份,我这里使用的是v1.4.7.源码的获取,请参考我另一篇博文:angular源码分析:angular源代码的获取与编译环境安装 二.什么是依赖注入 据我所知,依赖注入 ...
- Angular中 build的时候遇到的错误--There are multiple modules with names that only differ in casing
今天早上遇到一个Angular的编译的时候的错误 具体信息: There are multiple modules with names that only differ in casing.This ...
- Angular 个人深究(一)【Angular中的Typescript 装饰器】
Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...
随机推荐
- 如何使用ssh
如何使用ssh自己的笔记本做不了我的运算,只能依靠办公室的工作站,有时很不方便.所以做了一次远程监控.本想用vnc的,发现怎么都连不上,算了.还是SSH好用.工作站和笔记本都是fedora系统,所以默 ...
- 一步一步深入spring(3)--spring的依赖注入方式
对于spring配置一个bean时,如果需要给该bean提供一些初始化参数,则需要通过依赖注入方式,所谓的依赖注入就是通过spring将bean所需要的一些参数传递到bean实例对象的过程,sprin ...
- mysql 建表 AUTO_INCREMENT , 数据类型 VARCHAR
建表: 原帖地址: http://blog.sina.com.cn/s/blog_5da3d5c50100bjh0.html MySQL AUTO_INCREMENT 简介 (2009-01-02 1 ...
- MSSQL 清空日志 删除日志文件
MSSQL 清空日志 删除日志文件 最近的项目主要做数据的归档,把数据从一个数据库拉到另一个数据库,照成新数据库的日志文件非常大:于是想把日志文件删除.最简单就是先分离数据库->删除日志文件-& ...
- 在OpenStack虚拟机实例中创建swap分区的一种方法
测试组里一个同学负责MapR的搭建,MapR文档中建议每个节点上至少有24GB的swap分区,不知道MapR为啥会有这种反人类的建议……swap无非就是一块顺序读写的磁盘空间,莫非省着内存不用,用sw ...
- 方法输出C++输出斐波那契数列的几种方法
PS:今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘.目前又不当COO,还是得用心记代码哦! 定义: 斐波那契数列指的是这样一个数列:0, 1, 1, 2, 3, 5, ...
- java异常基础知识点
@firstmiki 2017年1月12日12:03:32 一.异常的产生和捕获: package Exception; /** * 演示了java中异常的产生和捕获 * @firstmiki */ ...
- 驱动09.nand flash
1 nand flash的操作 目的:读地址A的数据,把数据B写到地址A. 问1. 原理图上NAND FLASH和S3C2440之间只有数据线,怎么传输地址?答1.在DATA0-DATA7上既传输数据 ...
- asp.net小技巧:保留password模式文本框textbox内的数据不丢失。
在asp.net 2.0环境下,使用textbox,提交到服务器再传回,如果textbox是password模式的,那么textbox内的密码(星号.圆点),就没有了! 一个可行的做法是 : prot ...
- Python map多线程
import os import PIL from multiprocessing import Pool from PIL import Image SIZE = (75,75) SAVE_DIRE ...