个人中心
gpt4 book ai didi

angularjs - 将 $http 与 google 建议一起使用 - 从 angularjs 版本 1.3.15 转换为版本 1.6.4

转载 作者：可可西里 更新时间：2023-11-01 16:40:26 63 4
gpt4 key购买 nike

首先，我对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>

在头部元素中。如有任何建议，我们将不胜感激。

最佳答案

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

此外，访问控制 header 用于 CORS，并且仅在服务器上设置为响应 header ，而不是请求 header 。

JSONP 请求不接受 header ，因为它们实际上是脚本请求，没有 XMLHttpRequests。

您现在还必须将 JSONP url 声明为 $sce 可信 url。确保在页面中包含 angular-santize.js 并注入(inject) $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/

63 4 0
文章推荐： hadoop - PIG 中的 NOT IN 子句
文章推荐： java - HttpURLConnection 是连接重置或管道损坏
文章推荐： hadoop - 无法在配置单元 server2 上模拟
文章推荐： hadoop - 初始化 Metron Grok 解析器时出错
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com