0

何らかの理由でスクリプトが実行されないか、応答が返されません。コンソールは何もありません。yandex.transtale サイト ( https://tech.yandex.com/translate/doc/dg/reference/translate-docpage /) コード: http://jsbin.com/jolijep/edit?htmlへの回答を得ようとしています。 js、コンソール、出力

var app = angular.module('jsbin', []);

app.controller('DemoCtrl', function($scope, $http) {
  var url = "https://translate.yandex.net/api/v1.5/tr.json/translate";
  keyAPI = "trnsl.1.1.20130922T110455Z.4a9208e68c61a760.f819c1db302ba637c2bea1befa4db9f784e9fbb8";
  var vm = this;
  $scope.SendData = function() {
    // тут данные
    var textApi = 'Hello';
    var langApi = 'en-ru';
    var text1 = 'Hello';
    var data = "key=" + keyAPI + "&text=" + textApi + "&lang=" + langApi;


    $http.post(url, data)
      .success(function(data, status, headers, config) {
        vm.data = response.data;
        $scope.PostDataResponse = data;
        console.log(data);
      })
      .error(function(data, status, header, config) {
        $scope.ResponseDetails = "Data: " + data +
          "<hr />status: " + status +
          "<hr />headers: " + header +
          "<hr />config: " + config;
      });
  };
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Angular JS</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="weather.js"></script>
</head>

<body ng-app="jsbin">
  <div ng-controller="DemoCtrl as vm">
    <script src="weather.js"></script>
    <button ng-click="SendData()">Send</button>
    <br>Data: {{PostDataResponse}}
    <br>{{vm.data}} {{vm.PostDataResponse}} Data: {{scope.PostDataResponse}} {{vm.data}}
  </div>
</body>

</html>

4

1 に答える 1

2

Yandex translate API リファレンスを見ると、作成しているリクエストの情報を params(パラメータ) の形式で渡すように求められています。これらのパラメータは、リクエスト URL に追加されます。

POST リクエストを使用して API から情報を取得する他の方法は、そのリクエストの本文の形式で情報を渡すことです。

しかし、POST リクエストを使用した Yandex 翻訳 API は、URL に添付された情報を要求しています。

var data = "key="+keyAPI+"&text="+textApi+"&lang="+langApi

このデータ変数は、POST リクエストが API に対して行われたときに、 url変数に追加される必要があります。しかし、

$http.post(url, data)

$httpメソッドを呼び出すと、呼び出し中にdata変数をurlに追加する代わりに、データが post リクエストの本文として解釈されます。

AngularJS の $http API のよりクリーンで適切な実装は、キーがパラメーターの型で、値がパラメーターの値であるオブジェクト内にすべてのパラメーターを配置することです。

var params = {
      key: keyAPI,
      text:textApi,
      lang:langApi
}

これで、params オブジェクトに、リクエストを行う際に渡したいすべての情報が保持されます。

次に、$http リクエストを変更して、URL に追加するパラメータを認識できるようにする必要があります。$http.post メソッドの代わりに、より基本的な $http メソッドを使用しています。ベース URL、HTTP リクエストのメソッドのタイプ、最後に API へのリクエストで渡されるパラメータについて明確に説明します。

$http({
   url: url,
   method: 'POST',
   params: params
})
.success(function(data,headers,status,config){
  $scope.PostDataResponse = data;
  vm.data = data;
  console.log(data);
 })
.error(function(data,headers,status,config){
 $scope.ResponseDetails = "Data: " + data +
                "<hr />status: " + status +
                "<hr />headers: " + header +
                "<hr />config: " + config;
});

コードで間違っていたもう 1 つのことは、$scope.PostDataResponseの初期化です。

 $scope.PostDataResponse = response.data; //You are not getting any argument named response by the success function call

それを行う正しい方法は $scope.PostDataResponse = data; です。

変更を加えてコードを実行すると、問題なく動作するはずです。

すべてが正しく行われると、開発者コンソールに、リクエストの成功後にログに記録されたオブジェクトが表示されます。

呼び出しが成功したオブジェクト

Web ページにも同じオブジェクトが表示されます。

于 2016-11-24T23:34:28.457 に答える