Question

首先，我对angularjs一无所知。我确实设法用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="angular.js@1.3.15" 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="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>

在head元素中。任何建议将不胜感激。

Answer 1

success和error已弃用$http api，转而使用promise回调

访问控制标头也适用于CORS，仅作为响应标头设置在服务器上，不在请求标头中。

JSONP请求aaccept no header，因为它们实际上是脚本请求而不是XMLHttpRequests。

您现在还必须将JSONP网址声明为$sce个可信网址。一定要在页面中包含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

Answer 2

使用angularjs 1.6.4的最终Google搜索文件

我以为我会发布我的最终结果：

<!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>

使用带有谷歌建议的$ http - 从angularjs版本1.3.15转换为版本1.6.4

2 个答案: