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变量作用域更轻松
Oct 25 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 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 随机排序广告的实现代码
2011/05/09 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
对python 调用类属性的方法详解
2019/07/02 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
《夸父追日》教学反思
2014/02/26 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python