angular实现跨域
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实现跨域的更多相关文章
- Angular http跨域
原文:Angular http跨域 - 飞翔的小仓鼠 - 博客园 var app = angular.module('Mywind',['ui.router']); app.controller('M ...
- angular 的跨域处理
angular 的跨域处理,由于不并不支持跨域处理,所以我们对他也是无可奈何,angular 的跨域处理,需要我们在服务器上进行处理,把请求的数据改成 * ,也就是,谁都可以请求数据: angular ...
- angular之跨域
一.什么是跨域? 跨域是指一个域下的文档或者脚本去请求另一个域下的资源.(广义) 广义的跨域: 1.资源跳转:链接跳转.重定向.表单提交. 2.资源嵌入:<link>.<script ...
- angular.js跨域post解决方案
跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制. 下面阐述一下AngularJS中使用$http实现跨域请求数据. AngularJS XMLHttpR ...
- angular的跨域（angular百度下拉提示模拟）和angular选项卡
1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...
- angular cors跨域资源共享设置 和formdata设定
非常easy,下来容易找到: <pre name="code" class="javascript">.config(['$routeProvide ...
- angular解决跨域问题
通过angular自身的代理转发功能 配置package.json 启动项目通过npm start启动,会自动启动代理服务npm start
- angular http 跨域访问
1.在跟目录中创建配置文件:proxy.config.json ,文件内容如下: { "/api": { "target": "http://192. ...
- angularJS1笔记-(18)-$http及用angular实现JSONP跨域访问过程
官网上的解释为: The $http service is a core AngularJS service that facilitates communication with the remot ...
随机推荐
- JS表单原生验证器
一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部流行的框架,如bootstrap,由于我负责的模块 仅仅是其中的一部分,因此少数服从多数,无 ...
- IT技术网站汇总
首先是比较著名的博客型的网站!一般来说在国外比较著名的博客基本上都是比较有影响力发起的或者建立的经常发布一些比较有思考力深入分析的文章! 博客媒体网站 1.www.ArsTechnica.com 2. ...
- net stop 出现1060错误
net stop时出现1060错误,答案: 原来,net stop后面不能想当然地加上服务,而要在‘服务’里看看,那个服务究竟叫什么名字. 比如,我的mysql安装时不叫mysql,而是mysql5 ...
- laravel安装excel功能
原文安装链接:https://github.com/Maatwebsite/Laravel-Excel 代码如下: if ($rows = DB::connection('glist')->ta ...
- 如何成为一名优秀的UI设计师
zccst整理 因为我自己就是一个 0 美术基础.非计算机.非艺术类科班出身,但从事视觉设计工作的同学,所以很多和题主一样大学里学着不喜欢的专业,想要转设计但又不知从何开始的朋友都来问过我类似的问题, ...
- 使用STM8SF103 ADC采样电压（转）
源:使用STM8SF103 ADC采样电压 硬件环境: STM8SF103 TSSOP20封装 因为项目需要用到AD采样电池电压,于是便开始了使用STM8S ADC进行采样,也就有了下文. 手册上对S ...
- iOS 将NSArray、NSDictionary转换为JSON格式进行网络传输
http://blog.csdn.net/worldzhy/article/details/49982491 将NSArray.NSDictionary转换为JSON格式进行网络传输,是经常用到的,但 ...
- 史上最坑的证书报错解决方法：Code=3000 "未找到应用程序的“aps-environment”的权利字符串"
在ios注册远程通知获取设备令牌token的时候 // 注册远程通知获取设备令牌 toKen [[ UIApplication sharedApplication ] registerForRemot ...
- cocos2dx3.5 HTC One X 某些UI白屏或使用ClippingNode造成部分手机白屏
public Cocos2dxGLSurfaceView onCreateView() { Cocos2dxGLSurfaceView glSurfaceView = new Cocos2dxGLSu ...
- linux Cron 执行Django 任务计划
用shell 脚本调用python 脚本如下 #!/bin/bash export FLAVOR=liveexport PYTHONPATH=$PYTHONPATH:/home/alex/Django ...