使用$ http與谷歌建議 - 從angularjs版本1.3.15轉換到版本1.6.4

首先，我不太瞭解angularjs。我確實設法使用angularjs將單個文件網頁拼湊在一起。我作爲顯示在下面的時候遇到麻煩1.3.15版本轉換$ HTTP調用到1.6.4版本：

var url = 'http://suggestqueries.google.com/complete/search?callback=JSON_CALLBACK&client=firefox&hl=en&q=' + encodeURIComponent($scope.searchText); 
$http.defaults.useXDomain = true; 
$http({ 
    url: url, 
    method: 'JSONP', 
    headers: { 
    'Access-Control-Allow-Origin': '*', 
    'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT', 
    'Content-Type': 'application/json', 
    'Accept': 'application/json' 
    } 
    }). 
    success(function(data, status, headers, config) { 
    $scope.suggestions = data[1]; 
    }). 
    error(function(data, status, headers, config) { 
    $scope.suggestions = ['error connecting']; 
    });

不是真正確定它應該是什麼樣子。

這裏是整個文件：

<!DOCTYPE html> 
<html> 
<head> 
<script data-require="[email protected]" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script> 

<style> 
    #appDiv 
    { 
    position: fixed; 
    top: 30%; 
    left: 80%; 
    transform: translate(-80%, 0%); 
    width:50%; 
    } 

    #entry 
    { 
    width: 100% 
    } 

    #searchInput 
    { 
    display: table-cell; 
    color: #808080; 
    width:100%; 
    font-size:150%; 
    } 

    .goButton 
    { 
    font-size:150%; 
    } 

    .list 
    { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    cursor: default; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #DFDFDF; 
    } 
    .list:empty 
    { 
    border-style: none; 
    } 

    .listItem 
    { 
    color: #404040; 
    font-size:120%; 
    } 
    .listItem:hover 
    { 
    background: #DFDFDF; 

    } 
</style> 
</head> 
<body> 
<div id="appDiv" ng-app="googleSearch" ng-controller="googleCtrl"> 
    <form method="get" action="http://www.google.com/search" autocomplete="off"> 
    <table border="0" align="center" cellpadding="0"> 
     <tr> 
     <td id="entry"> 
      <input type="text" name="q" id="searchInput" autofocus="autofocus" maxlength="255" ng-model="searchText" ng-keyup="search()" /> 
     </td> 
     <td> 
      <input class="goButton" type="submit" value="  Go!  "/> 
      <input type="hidden" name="sitesearch" value="" /> 
     </td> 
     </tr> 
     <tr> 
     <td colspan="2" ng-mouseleave="restore()"> 
      <ul class="list"><li class="listItem" ng-repeat="x in suggestions" ng-click="select(x)" ng-mouseover="preview(x)">{{x}}</li></ul> 
     </td> 
     </tr> 
    </table> 
    </form> 
</div> 

<script> 
var app = angular.module("googleSearch", []); 

app.controller("googleCtrl", function($scope, $http) 
{ 

$scope.select = function(text) 
{ 
    $scope.searchText = text; 
    $scope.memory = text; 
    $scope.suggestions = []; 
    document.getElementById("searchInput").focus(); 
} 

$scope.preview = function(text) 
{ 
    $scope.searchText = text; 
} 

$scope.restore = function() 
{ 
    $scope.searchText = $scope.memory; 
} 

$scope.search = function() 
{ 
    $scope.memory = $scope.searchText; 
    googleSearch(); 
} 

googleSearch = function() 
{ 
    if ($scope.searchText == null || $scope.searchText.length < 1) 
    { 
    $scope.suggestions = []; 
    return 
    } 
    var url = 'http://suggestqueries.google.com/complete/search?callback=JSON_CALLBACK&client=firefox&hl=en&q=' + encodeURIComponent($scope.searchText); 
$http.defaults.useXDomain = true; 
$http({ 
    url: url, 
    method: 'JSONP', 
    headers: { 
    'Access-Control-Allow-Origin': '*', 
    'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT', 
    'Content-Type': 'application/json', 
    'Accept': 'application/json' 
    } 
    }). 
    success(function(data, status, headers, config) { 
    $scope.suggestions = data[1]; 
    }). 
    error(function(data, status, headers, config) { 
    $scope.suggestions = ['error connecting']; 
    }); 
} 
}); 
</script> 

</body> 
</html>

我有，當我使用的GoogleSearch功能麻煩：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

代替：

<script data-require="[email protected]" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>

在頭元件。任何建議，將不勝感激。

來源

2017-10-16 user1819780

success和error被棄用$http API贊成使用承諾回調

而且訪問控制頭對於CORS，並且只有在服務器上設置爲請求頭響應頭沒有的。

JSONP請求aaccept沒有標題，因爲它們實際上是腳本請求沒有XMLHttpRequests。

您現在還必須聲明JSONP網址爲$sce受信任的網址。一定要包括在頁角santize.js並注入$sce

使用then()和catch()

嘗試：

var url = 'http://suggestqueries.google.com/complete/search?client=firefox&hl=en&q=' + encodeURIComponent($scope.searchText); 
var truestedUrl = $sce.trustAsResourceUrl(url); 
$http.jsonp(truestedUrl , {jsonpCallbackParam: 'callback'}).then(function(response) { 
    $scope.suggestions = response.data[1]; 
}).catch(function(error) { 
    $scope.suggestions = ['error connecting']; 
});

參考$http.jsonp() docs

使用

來源

2017-10-16 02:49:04 charlietfl

感謝這工作。我必須將置於頭部，然後將控制器更改爲：app.controller（「googleCtrl 「['$ scope'，'$ http'，'$ sce'，函數（$ scope，$ http，$ sce） – user1819780

正確...這就是爲什麼我提到包含它並注入$ sce – charlietfl

我不知道爲什麼有人投下了這個答案。 – user1819780

最終谷歌搜索文件angularjs 1.6.4

我只是想我會發布我的最終結果：

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-sanitize.js"></script> 

<style> 
    #appDiv 
    { 
    position: fixed; 
    top: 30%; 
    left: 65%; 
    transform: translate(-65%, 0%); 
    width:50%; 
    } 

    #entry 
    { 
    width: 100% 
    } 

    #searchInput 
    { 
    display: table-cell; 
    color: #000000; 
    width:100%; 
    font-size:150%; 
    } 

    .goButton 
    { 
    font-size:150%; 
    } 

    input[type=submit] 
    { 
    padding:7px 0px 7px 0px;; 
    background: #00ff00; 
    border: 1px solid black; 
    border-radius: 5px; 
    } 

    .list 
    { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    cursor: default; 
    } 

    .listItem 
    { 
    color: #000000; 
    font-size:150%; 
    } 
    .listItem:hover 
    { 
    background: #DFDFDF; 
    } 
</style> 
</head> 
<body> 
<div id="appDiv" ng-app="googleSearch" ng-controller="googleCtrl"> 
    <form method="get" action="http://www.google.com/search" autocomplete="off"> 
    <table border="0" align="center" cellpadding="0"> 
     <tr> 
     <td id="entry"> 
      <input type="text" name="q" id="searchInput" autofocus="autofocus" maxlength="255" ng-model="searchText" ng-keyup="search()" /> 
     </td> 
     <td> 
      <input class="goButton" type="submit" value="  Go!  "/> 
      <input type="hidden" name="sitesearch" value="" /> 
     </td> 
     </tr> 
     <tr> 
     <td colspan="2" ng-mouseleave="restore()"> 
      <ul class="list"><li class="listItem" ng-repeat="x in suggestions" ng-click="select(x)" ng-mouseover="preview(x)">{{x}}</li></ul> 
     </td> 
     </tr> 
    </table> 
    </form> 
</div> 

<script> 
var app = angular.module("googleSearch", []); 

app.controller("googleCtrl", ['$scope', '$http', '$sce', function($scope, $http, $sce) 
{ 
    $scope.select = function(text) 
    { 
    $scope.searchText = text; 
    $scope.memory = text; 
    $scope.suggestions = []; 
    document.getElementById("searchInput").focus(); 
    googleSearch(); 
    } 

    $scope.preview = function(text) 
    { 
    $scope.searchText = text; 
    } 

    $scope.restore = function() 
    { 
    $scope.searchText = $scope.memory; 
    } 

    $scope.search = function() 
    { 
    $scope.memory = $scope.searchText; 
    googleSearch(); 
    } 

    googleSearch = function() 
    { 
    if ($scope.searchText == null || $scope.searchText.length < 1) 
    { 
     $scope.suggestions = []; 
     return 
    } 

    var url = 'http://suggestqueries.google.com/complete/search?client=firefox&hl=en&q=' + encodeURIComponent($scope.searchText); 
    var truestedUrl = $sce.trustAsResourceUrl(url); 

    $http.jsonp(truestedUrl , {jsonpCallbackParam: 'callback'}).then(function(response) { 
     $scope.suggestions = response.data[1]; 
    }).catch(function(error) { 
     $scope.suggestions = []; 
    }); 

} 
}]); 
</script> 

</body> 
</html>

來源

2017-10-16 23:42:25 user1819780

使用$ http與谷歌建議 - 從angularjs版本1.3.15轉換到版本1.6.4

回答

相關問題