首先，我不太了解安格拉。我确实设法用angularjs修补了一个单独的文件网页。将$http调用从版本1.3.15转换为版本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>
我在使用谷歌搜索功能时遇到问题：
<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>
在头部元素中。如有任何建议，将不胜感激。
最佳答案
success和error在$httpapi中不赞成使用promise回调
此外，访问控制头用于CORS，仅在服务器上设置为响应头，而不是在请求头中。
jsonp请求不接受头，因为它们实际上是脚本请求，而不是xmlhttprequest。
现在还必须将jsonp url声明为$sce受信任的url。确保在页面中包含angular-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
关于angularjs - 将$ http与Google建议一起使用-从angularjs版本1.3.15转换为版本1.6.4，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46762016/