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记录的更多相关文章

  1. Angular中的jsonp

    1.一般我们使用Angualr中的jsonp值这样使用的:注入$http服务 这样使用jsonp的方式可以支持多数api,但是douban不支持无法使用 module.controller('InTh ...

  2. 使用Cors在WebApi中实现跨域请求,请求方式为angular的 $http.jsonp

    使用Cors在WebApi中实现跨域请求 第一步,在webapi项目中安装cors 在Web API配置文件中(Global.asax)进行全局配置: public class WebApiAppli ...

  3. Angular 中的数据交互(get jsonp post)

    一.Angular get 请求数据 Angular5.x 以后 get.post 和和服务器交互使用的是 HttpClientModule 模块. 1.在 app.module.ts 中引入 并注入 ...

  4. angular 中父元素ng-repeat后子元素ng-click失效

    在angular中使用ng-repeat后ng-click失效,今天在这个上面踩坑了.特此记录一下. 因为ng-repeat创造了新的SCOPE.如果要使用这个scope的话就必须使用$parent来 ...

  5. angular源码分析:angular中脏活累活的承担者之$interpolate

    一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配 ...

  6. 形象的讲解angular中的$q与promise(转)

    以下内容摘自http://www.ngnice.com/posts/126ee9cf6ddb68 promise不是angular首创的,作为一种编程模式,它出现在……1976年,比js还要古老得多. ...

  7. angular源码分析:angular中的依赖注入式如何实现的

    一.准备 angular的源码一份,我这里使用的是v1.4.7.源码的获取,请参考我另一篇博文:angular源码分析:angular源代码的获取与编译环境安装 二.什么是依赖注入 据我所知,依赖注入 ...

  8. 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 ...

  9. Angular 个人深究(一)【Angular中的Typescript 装饰器】

    Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...

随机推荐

  1. BOOST中read_some和 boost::asio::error::eof(2)错误

    当socket读写完成调用回调函数时候一定要检查 是不是有EOF错误,如果有那么好了,另一方已经断开连接了别无选择,你也断开把.   for (;;) { boost::array < char ...

  2. listView 分页加载数据

    Android应用 开发中,采用ListView组件来展示数据是很常用的功能,当一个应用要展现很多的数据时,一般情况下都不会把所有的数据一次就展示出来,而是通过分页 的形式来展示数据,个人觉得这样会有 ...

  3. SPFILE 、PFILE 的全面解读

    这里先阐述一下数据库的启动过程: 1.      启动实例/例程(nomount状态)时,读取参数文件(文本文件PFILE 或服务器参数文件SPFILE),分配SGA.启动后台进程.打开告警文件及后台 ...

  4. as3 Loader程序域

    Loader的 load方法有两个参数 第二个参数是LoaderContext对象 LoaderContext对象里有一个applicationDomain( 程序 域)对象 设置程序域对象可以设置两 ...

  5. SVN插件

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  6. ajax系列之用jQuery的ajax方法向服务器发出get和post请求

    打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个 ...

  7. Linux环境搭建Hadoop伪分布模式

    Hadoop有三种分布模式:单机模式.伪分布.全分布模式,相比于其他两种,伪分布是最适合初学者开发学习使用的,可以了解Hadoop的运行原理,是最好的选择.接下来,就开始部署环境. 首先要安装好Lin ...

  8. 第一百三十四节,JavaScript,封装库--遮罩锁屏

    JavaScript,封装库--遮罩锁屏 封装库新增1个方法 /** zhe_zhao_suo_ping()方法,将一个区块元素设置成遮罩锁屏区块 * 注意:一般需要在css文件将元素设置成隐藏 ** ...

  9. magento获取ip地址

    Mage::helper('coreservice')->getRequestIp()获取IP地址

  10. leetcode 024

    Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...