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框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...
随机推荐
- BOOST中read_some和 boost::asio::error::eof(2)错误
当socket读写完成调用回调函数时候一定要检查 是不是有EOF错误,如果有那么好了,另一方已经断开连接了别无选择,你也断开把. for (;;) { boost::array < char ...
- listView 分页加载数据
Android应用 开发中,采用ListView组件来展示数据是很常用的功能,当一个应用要展现很多的数据时,一般情况下都不会把所有的数据一次就展示出来,而是通过分页 的形式来展示数据,个人觉得这样会有 ...
- SPFILE 、PFILE 的全面解读
这里先阐述一下数据库的启动过程: 1. 启动实例/例程(nomount状态)时,读取参数文件(文本文件PFILE 或服务器参数文件SPFILE),分配SGA.启动后台进程.打开告警文件及后台 ...
- as3 Loader程序域
Loader的 load方法有两个参数 第二个参数是LoaderContext对象 LoaderContext对象里有一个applicationDomain( 程序 域)对象 设置程序域对象可以设置两 ...
- SVN插件
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...
- ajax系列之用jQuery的ajax方法向服务器发出get和post请求
打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个 ...
- Linux环境搭建Hadoop伪分布模式
Hadoop有三种分布模式:单机模式.伪分布.全分布模式,相比于其他两种,伪分布是最适合初学者开发学习使用的,可以了解Hadoop的运行原理,是最好的选择.接下来,就开始部署环境. 首先要安装好Lin ...
- 第一百三十四节,JavaScript,封装库--遮罩锁屏
JavaScript,封装库--遮罩锁屏 封装库新增1个方法 /** zhe_zhao_suo_ping()方法,将一个区块元素设置成遮罩锁屏区块 * 注意:一般需要在css文件将元素设置成隐藏 ** ...
- magento获取ip地址
Mage::helper('coreservice')->getRequestIp()获取IP地址
- leetcode 024
Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...