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 相关文章推荐
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
Angular.JS中指令ng-if的注意事项小结
Jun 21 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
基于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
中国的第一台收音机
2021/03/01 无线电
十天学会php(2)
2006/10/09 PHP
用PHP制作静态网站的模板框架(二)
2006/10/09 PHP
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
JS 树形递归实例代码
2010/05/18 Javascript
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
python中的sort方法使用详解
2014/07/25 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
python文件读取失败怎么处理
2020/06/23 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
门卫岗位职责
2013/11/15 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
社区娱乐活动方案
2014/08/21 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
护士实习自荐信
2015/03/06 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书