angular.js 自带jsonp，实现跨域，下面来实搜索框的下拉列表，使用百度和360分别尝试一下

百度：url截取之后红色部分需替换 ：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=数据&cb=JSON_CALLBACK

360：https://sug.so.360.cn/suggest?callback=JSON_CALLBACK&word=数据

注意：需要在服务器环境下运行

思路：

　　1 .声明 angular

　　2 .控制器函数中调用$http服务，用来读取web服务器上的数据

　　3 .绑定数据$scope.data=[] 用来存放返回的数据

　　4 .绑定函数$scope.show=function(){} ,在keyup的时候执行

　　5 .调用$http.jsonp(url)

　　6 .返回结果赋值给$scope.data ，$scope.data=data.s;

下面代码

 <!doctype html>

 <html ng-app="app">

 <head>

 <meta charset="utf-8">

 <style>

 </style>

 <script src="angular.js"></script>

 <script>

 var app=angular.module('app',[]); //声明

 app.controller('test',function ($scope,$http){ // $http 是一个用于读取web服务器上数据的服务。

     $scope.data=[]; // 绑定数据

     $scope.show=function (){

         // $http.jsonp(url) 是用于读取服务器数据的函数。

         $http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+$scope.t1+'&cb=JSON_CALLBACK').success(function (data){

             //返回的结果赋值给$scope.data

             $scope.data=data.s;

         });

     };

 });

 </script>

 </head>

 <body ng-controller="test">

     <div>

         <!-- 输入内容绑定为t1 ，ng-keyup="show()" -->

         <input type="text" ng-model="t1" ng-keyup="show()" />

     </div>

     <ul>

         <!-- 数据展示 -->

         <li ng-repeat="item in data">{{item}}</li>

     </ul>

 </body>

 </html>

angular实现跨域的更多相关文章

  1. Angular http跨域

    原文:Angular http跨域 - 飞翔的小仓鼠 - 博客园 var app = angular.module('Mywind',['ui.router']); app.controller('M ...

  2. angular 的跨域处理

    angular 的跨域处理,由于不并不支持跨域处理,所以我们对他也是无可奈何,angular 的跨域处理,需要我们在服务器上进行处理,把请求的数据改成 * ,也就是,谁都可以请求数据: angular ...

  3. angular之跨域

    一.什么是跨域? 跨域是指一个域下的文档或者脚本去请求另一个域下的资源.(广义) 广义的跨域: 1.资源跳转:链接跳转.重定向.表单提交. 2.资源嵌入:<link>.<script ...

  4. angular.js跨域post解决方案

    跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制. 下面阐述一下AngularJS中使用$http实现跨域请求数据. AngularJS XMLHttpR ...

  5. angular的跨域（angular百度下拉提示模拟）和angular选项卡

    1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...

  6. angular cors跨域资源共享设置 和formdata设定

    非常easy,下来容易找到: <pre name="code" class="javascript">.config(['$routeProvide ...

  7. angular解决跨域问题

    通过angular自身的代理转发功能 配置package.json  启动项目通过npm start启动,会自动启动代理服务npm start

  8. angular http 跨域访问

    1.在跟目录中创建配置文件:proxy.config.json ,文件内容如下: { "/api": { "target": "http://192. ...

  9. angularJS1笔记-(18)-$http及用angular实现JSONP跨域访问过程

    官网上的解释为: The $http service is a core AngularJS service that facilitates communication with the remot ...

随机推荐

  1. 一、Hbase的安装

    一.Hbase配置 这个是我从网上找的一个版本,网上说配置成功. 先决条件: (1)hadoop的版本与hbase的版本要对应,主要是hadoop目录下的hadoop-core-1.0.4.jar的版 ...

  2. 服务器性能分析工具gprof的使用及没有生成gmon.out文件的原因

            早上从网上查看资料时无意中看到了gprof这个工具,随便把他用在项目里试了一下.结果发现调用次数的数据比较全,但调用时间基本上都是0.网上查了一下发现gprof只记录执行时间超过0.0 ...

  3. margin负值-内秀篇

    zccst整理 margin系列之布局篇 margin系列之bug巡演(三) margin系列之bug巡演(二) margin系列之内秀篇(二) margin系列之bug巡演 margin系列之内秀篇 ...

  4. 使用LIBUSB实现和自定义通讯设备通讯--MFC代码在末尾

    LIBUSB是一款简单好用的USB通讯开发库,一般HID设备用该库通讯能大大降低开发周期,使用如下,首先需要为设备安装驱动 在libusb的bin目录下有一个inf_wirzed.exe的文件,该文件 ...

  5. IdTCP的C++Builder2010示例（转）

    源:IdTCP的C++Builder2010示例 IdTCP的C++Builder2010示例 这个是服务端的: void __fastcall TTCPDataServer::TCPServerEx ...

  6. STM32F103外部中断编程

    STM32F103外部中断编程   中断,顾名思义就是停下手头的活,去干另外一件急活,干完急活然后回来继续干手头的活. 单片机和人一样,有时候也有更急的程序需要执行,执行完之后再回来执行之前正在执行的 ...

  7. 我推荐的一些iOS开发书单

    文/叶孤城___(简书作者)原文链接:http://www.jianshu.com/p/2fa080673842著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 上次发了一下比较不错的i ...

  8. AngularJS中使用的表单验证

    Reference: http://www.tuicool.com/articles/2Qbiqi 客户端表单验证是AngularJS里面最酷的功能之一. AngularJS表单验证可以让你从一开始就 ...

  9. [Usaco2008 Dec]Secret Message 秘密信息

    2794: [Usaco2008 Dec]Secret Message 秘密信息 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 7  Solved: 3 ...

  10. checkbox、radio控件和文字不对其

    一般使用html控件的时候  单选按钮和复选框的控件和文字不对齐 给input控件加上   style="vertical-align: middle; margin-top: -2px; ...