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学习笔记8 用JSON做原型
Jan 11 Javascript
event.X和event.clientX的区别分析
Oct 06 Javascript
js几秒以后倒计时跳转示例
Dec 26 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
JavaScript 防盗链的原理以及破解方法
Dec 29 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 include的妙用,实现路径加密
2008/07/29 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
Python中你应该知道的一些内置函数
2017/03/31 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
Python换行与不换行的输出实例
2020/02/19 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
餐厅执行经理岗位职责范本
2014/02/26 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
数据保密承诺书
2014/06/03 职场文书
计划生育工作汇报
2014/10/28 职场文书
1000字打架检讨书
2014/11/03 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
环卫工人慰问信
2015/02/15 职场文书
小学重阳节活动总结
2015/03/24 职场文书
朋友聚会祝酒词
2015/08/10 职场文书