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 ...
随机推荐
- iOS开源库--最全的整理
youtube下载神器:https://github.com/rg3/youtube-dl我擦咧 vim插件:https://github.com/Valloric/YouCompleteMevim插 ...
- 如何使用UDP进行跨网段广播(转)
源:如何使用UDP进行跨网段广播 广播域首先我们来了解一下广播域的概念.广播域是网络中能接收任一台主机发出的广播帧的所有主机集合.也就是说,如果广播域内的其中一台主机发出一个广播帧,同一广播域内所有的 ...
- SQL Server 2012 - 数据表的操作
unicode:双字节编码 variable:可变的 character:字符 T-SQL: Transact Structured Query Language unique:唯 ...
- 【转】成为Linux内核高手的四个方法
我曾经问别人如何开始内核编程的学习,他们基本上都说:①如果你不需要了解内核是如何为你工作的,你为何要尝试呢?②你应该订阅Linux内核邮件列表,然后努力去理解.③如果你不去编写针对Linux内核的代码 ...
- ios 闪屏页的设置
ref:http://blog.csdn.net/bianruifeng/article/details/8746549
- bzoj-4318 OSU! 【数学期望】
Description osu 是一款群众喜闻乐见的休闲软件. 我们可以把osu的规则简化与改编成以下的样子: 一共有n次操作,每次操作只有成功与失败之分,成功对应1,失败对应0,n次操作对应为1 ...
- python流程控制:for循环
for循环: 先来看一个猜年龄的小程序: AGE = 23 count = 0 for i in range(10): if count == 3: u_count = input("y|n ...
- UVa 11495 - Bubbles and Buckets
题目大意:给一个有n个数的序列,通过交换相邻的逆序数使这个序列最终有序,求需要交换的次数. 本来可以用冒泡排序解决,但是n达到105,用冒泡排序会超时,用O(nlogn)的归并排序可以达到要求.< ...
- Python科学计算之Pandas
Reference: http://mp.weixin.qq.com/s?src=3×tamp=1474979163&ver=1&signature=wnZn1UtW ...
- 使用nodejs爬取和讯网高管增减持数据
为了抓取和讯网高管增减持的数据,首先得分析一下数据的来源: 网址: http://stockdata.stock.hexun.com/ggzjc/history.shtml 使用chrome开发者工具 ...