微信小程序学院_Angular完成跨域(查找框的下拉列

Angular实现跨域(搜索框的下拉列表)     .Wang   angular.js 自带jsonp，实现跨域，下面来实现搜索框的下拉列表功能，本文思路明确，非常不错，具有参考借鉴价值，需要的朋友参考下吧

angular.js 自带jsonp，实现跨域，下面来实现搜索框的下拉列表，使用百度和360分别尝试一下

百度：url截取之后红色部分需替换 ：=数据 cb=JSON_CALLBACK

360：=数据

注意：需要在服务器环境下运行

思路：

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('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 
 !-- 数据展示 -- 
 li ng-repeat="item in data" {{item}} /li 
 /ul 
 /body 
 /html 

以上所述是小编给大家介绍的Angular实现跨域(搜索框的下拉列表)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持！