2016-11-24 87 views
0

由於某種原因腳本無法運行或返回答案。 控制檯沒什麼。 試圖得到答案yandex.transtale網站(https://tech.yandex.com/translate/doc/dg/reference/translate-docpage /) 代碼:http://jsbin.com/jolijep/edit?html,js,console,output^不運行功能

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

在控制檯中,沒有錯誤。 – Dmitry

回答

2

如果你看一下Yandex的翻譯API的參考,它要求你傳遞的信息請求以params(參數)的形式進行。這些參數將被附加到請求URL。

通過POST請求從API獲取信息的其他方式是以該請求正文的形式傳遞信息。

但是,Yandex翻譯API與POST請求是要求附加到該網址的信息。

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

數據變量應該得到附加到URL變量當POST請求到API製成。但是,

$http.post(url, data) 

調用$ HTTP方法使同時使調用解釋爲POST請求的身體,而不是追加數據變量來網址數據。

對於AngularJS的$ http API來說,更簡潔和適當的實現是將所有參數放在一個對象中,其中鍵是參數類型,值是參數值。

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 =數據的另一件事;

現在如果你運行修改後的代碼,它應該運行得很好。

如果一切正常完成,那麼在開發人員控制檯中,您會發現請求成功後記錄了一個對象。

Object with the success of the call

在您的網頁還,你會看到相同的對象。

+0

另外我正在考慮** weather.js **是你定義角模塊的JS腳本 –

+0

http://jsbin.com/sejupidabi/edit?html,js,console,output – Dmitry

+0

我發現是錯誤:無效的API密鑰。 http://jsbin.com/sejupidabi/edit?html,js,console,output – Dmitry