Angular实现跨域(搜索框的下拉列表)


Posted in Javascript onFebruary 16, 2017

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实现跨域(搜索框的下拉列表),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 #Javascript
js模态对话框使用方法详解
Feb 16 #Javascript
javascript获取以及设置光标位置
Feb 16 #Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 #Javascript
浅谈$_FILES数组为空的原因
Feb 16 #Javascript
原生js实现秒表计时器功能
Feb 16 #Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 #Javascript
You might like
PHP也能干大事 随机函数
2015/04/14 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
JS实现百度搜索框
2021/02/25 Javascript
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
python两种遍历字典(dict)的方法比较
2014/05/29 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
python实现实时视频流播放代码实例
2020/01/11 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
巴西女装购物网站:Eclectic
2018/04/24 全球购物
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
面试后的感谢信范文
2014/02/01 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
忠诚教育心得体会
2014/09/03 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers