Angular實(shí)現(xiàn)跨域(搜索框的下拉列表)

更新時(shí)間：2017年02月16日 11:30:12 作者：NT.Wang

angular.js 自帶jsonp，實(shí)現(xiàn)跨域，下面來(lái)實(shí)現(xiàn)搜索框的下拉列表功能，本文思路明確，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧

angular.js 自帶jsonp，實(shí)現(xiàn)跨域，下面來(lái)實(shí)現(xiàn)搜索框的下拉列表，使用百度和360分別嘗試一下

百度：url截取之后紅色部分需替換：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=數(shù)據(jù)&cb=JSON_CALLBACK

360：https://sug.so.#/suggest?callback=JSON_CALLBACK&word=數(shù)據(jù)

注意：需要在服務(wù)器環(huán)境下運(yùn)行

思路：

　　1 .聲明 angular

　　2 .控制器函數(shù)中調(diào)用$http服務(wù)，用來(lái)讀取web服務(wù)器上的數(shù)據(jù)

　　3 .綁定數(shù)據(jù)$scope.data=[] 用來(lái)存放返回的數(shù)據(jù)

　　4 .綁定函數(shù)$scope.show=function(){} ,在keyup的時(shí)候執(zhí)行

　　5 .調(diào)用$http.jsonp(url)

　　6 .返回結(jié)果賦值給$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 是一個(gè)用于讀取web服務(wù)器上數(shù)據(jù)的服務(wù)。
  $scope.data=[]; // 綁定數(shù)據(jù)
  $scope.show=function (){
    // $http.jsonp(url) 是用于讀取服務(wù)器數(shù)據(jù)的函數(shù)。
    $http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+$scope.t1+'&cb=JSON_CALLBACK').success(function (data){
      //返回的結(jié)果賦值給$scope.data
      $scope.data=data.s;
    });
  };
});
</script>
</head>
<body ng-controller="test">
  <div>
    <!-- 輸入內(nèi)容綁定為t1 ，ng-keyup="show()" -->
    <input type="text" ng-model="t1" ng-keyup="show()" />
  </div>
  <ul>
    <!-- 數(shù)據(jù)展示 -->
    <li ng-repeat="item in data">{{item}}</li>
  </ul>
</body>
</html>

以上所述是小編給大家介紹的Angular實(shí)現(xiàn)跨域(搜索框的下拉列表)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

RequireJS 依賴關(guān)系的實(shí)例(推薦)
下面小編就為大家?guī)?lái)一篇RequireJS 依賴關(guān)系的實(shí)例(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-01-01
詳解angular 中的自定義指令之詳解API
本篇文章主要介紹了angular 中的自定義指令之詳解API，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-06-06
Angular將填入表單的數(shù)據(jù)渲染到表格的方法
這篇文章主要介紹了Angular將填入表單的數(shù)據(jù)渲染到表格的方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-09-09
詳解ng-alain動(dòng)態(tài)表單SF表單項(xiàng)設(shè)置必填和正則校驗(yàn)
這篇文章主要介紹了詳解ng-alain動(dòng)態(tài)表單SF表單項(xiàng)設(shè)置必填和正則校驗(yàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2019-06-06
Angular實(shí)現(xiàn)預(yù)加載延遲模塊的示例
本篇文章主要介紹了Angular實(shí)現(xiàn)預(yù)加載延遲模塊的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-10-10
angular4應(yīng)用中輸入的最小值和最大值的方法
這篇文章主要介紹了angular4應(yīng)用中輸入的最小值和最大值的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2019-05-05
Angular獲取手機(jī)驗(yàn)證碼實(shí)現(xiàn)移動(dòng)端登錄注冊(cè)功能
最近在使用angular來(lái)做項(xiàng)目，功能要求實(shí)現(xiàn)一是點(diǎn)擊按鈕獲取驗(yàn)證碼，二是點(diǎn)擊登錄驗(yàn)證表單。之前用jquery來(lái)做項(xiàng)目很好做，使用angular怎么實(shí)現(xiàn)呢？其實(shí)實(shí)現(xiàn)代碼也很簡(jiǎn)單的，下面通過實(shí)例代碼給大家介紹下，需要的朋友參考下吧
2017-05-05
AngularJS實(shí)現(xiàn)的省市二級(jí)聯(lián)動(dòng)功能示例【可對(duì)選項(xiàng)實(shí)現(xiàn)增刪】
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的省市二級(jí)聯(lián)動(dòng)功能,涉及事件監(jiān)聽、響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,此外還具備對(duì)選項(xiàng)進(jìn)行增刪的功能,需要的朋友可以參考下
2017-10-10
深入解析Angular動(dòng)態(tài)導(dǎo)入和懶加載實(shí)例
這篇文章主要為大家深入解析了Angular動(dòng)態(tài)導(dǎo)入和懶加載實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
AngularJS的一些基本樣式初窺
這篇文章主要介紹了AngularJS的一些基本樣式初窺,AngularJS是一款高人氣JavaScript框架,需要的朋友可以參考下
2015-07-07