^ Не работает функция

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>
  • 1
    Это входит в блок ошибок мой друг.
  • 0
    В консоли нет ошибок.
Теги:
yandex
yandex-api

1 ответ

2
Лучший ответ

Если вы посмотрите на ссылку API перевода Yandex, он попросил вас передать информацию для запроса, который вы делаете, в форме параметров (параметра). Эти параметры должны быть добавлены к URL-адресу запроса.

Другими способами получения информации от API с помощью запроса POST является передача информации в форме тела этого запроса.

Но API перевода Yandex с запросом POST запрашивает информацию, привязанную к URL-адресу.

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

эта переменная данных должна быть добавлена к переменной url, когда запрос POST добавляется в API. Но,

$http.post(url, data)

Вызов метода $ http делает данные интерпретированными как тело почтового запроса, а не добавляет переменную данных к URL-адресу при совершении вызова.

Более чистая и правильная реализация API-интерфейса $ http для AngularJS заключалась бы в том, чтобы поместить все параметры в объект, где ключи являются типом параметра, а значения - значениями параметров.

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

Теперь в объекте params вы сохраняете всю информацию, которую хотите передать, делая запрос.

Во-вторых, вам нужно изменить запрос $ http, чтобы он знал, какие параметры должны быть добавлены к URL-адресу. Я использую более простой метод $ http вместо метода $ http.post, я четко укажу, какой должен быть базовый 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;
});

Еще одна вещь, которая была неправильной в вашем коде, была инициализация $ scope.PostDataResponse

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

Правильный способ сделать это будет $ scope.PostDataResponse = data;

Теперь, если вы запустите код с модификацией, он должен работать довольно хорошо.

Если все сделано правильно, то в консоли разработчика вы найдете объект, зарегистрированный после успеха запроса.

Объект с успехом вызова

На веб-странице также вы увидите тот же объект.

  • 0
    Также я считаю, что weather.js - это JS-скрипт, в котором вы определяете свой угловой модуль.
  • 0
    jsbin.com/sejupidabi/edit?html,js,console,output
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню