Обратный звонок с помощью Google Translate V2

Раньше я использовал перевод V1 Google. В моем JavaScript я бы перебирал набор элементов после загрузки страницы, переводил текст и выводил результат в соответствующее текстовое поле. Я пытаюсь реализовать ту же функциональность в V2 платного API (биллинг включен).

Это то, что я сделал в V1, внутри цикла:

google.language.translate(lookupText, 'gb', 'fr', function (result) {
if (!result.error) {
ctlSuggestion.innerText = result.translation;
}
});

Это работало хорошо, потому что функция обратного вызова была встроена в запрос, поэтому я мог обновить innerText из правильного элемента после того, как результат вернется.

В V2, похоже, не похоже на подобный метод. Я попытался использовать jQuery Ajax, но получил сообщение "Отказано в доступе", я думаю, что это потому, что его перекрестный доменный вызов или что-то еще:

$.ajax({
 type: "GET",
 url: "https://www.googleapis.com/language/translate/v2",
 data: { key: "API-KEY", source: "en", target: "fr", q: lookupText },
 dataType: 'json',
 success: function (data) {
 alert(data.data.translations[0].translatedText);
 },
 error: function (data) {
 alert('fail');
 }
 });

Я могу заставить метод REST работать, но в функции обратного вызова нет способа узнать, из какого управления пришел запрос:

var newScript = document.createElement('script');
 newScript.type = 'text/javascript';
 var sourceText = "Hello World"
 var source = 'https://www.googleapis.com/language/translate/v2?key=API-KEY=en&target=de&callback=translateText&q=' + sourceText;
 newScript.src = source;

 // When we add this script to the head, the request is sent off.
 document.getElementsByTagName('head')[0].appendChild(newScript);


 function translateText(response) {
 alert(response.data.translations[0].translatedText);
 }

Если бы я мог передать дополнительный параметр в функцию обратного вызова, я мог бы указать элемент управления для обновления, но я не думаю, что это возможно с помощью этого метода.

2 ответа

Успех!

Мне удалось создать метод $.ajax(), который позволил мне создать функцию обратного вызова для каждого отдельного переведенного элемента.

Первая проблема заключалась в том, что я использовал jQuery 1.4.x. Версия 1.5 и далее позволяет использовать междоменные вызовы при использовании типа данных JASONP. Вот почему я получил сообщение "Отказано в доступе".

Второе изменение состояло в том, чтобы изменить dataType из jspn в jsonp:

$.ajax({
 type: "GET",
 url: "https://www.googleapis.com/language/translate/v2",
 data: { key: "API-KEY", source: "en", target: "fr", q: lookupText },
 dataType: 'jsonp',
 success: function (data) {
 alert(data.data.translations[0].translatedText);
 },
 error: function (data) {
 alert('fail');
 }
 });

Надеюсь, это будет полезно для других.


Ну, вы можете создать "новую" функцию обратного вызова для каждого элемента, который вы переводите, и удалить выполняемую функцию. т.е. что-то вроде:

function translateElement(elementID) {

 var element = document.getElementsById(elementID);

 // this is a temporary function for updating this particular element
 window['translate'+elementID] = function(response) {
 document.getElementsById(elementID).innerHTML = response.data.translations[0].translatedText;
 setTimeout(function() {
 // remove the temporary function
 window['translate'+elementID] = null;
 }, 1000);
 };

 var newScript = document.createElement('script');
 newScript.type = 'text/javascript';
 var sourceText = "Hello World"
 var source = 'https://www.googleapis.com/language/translate/v2?key=API-KEY=en&target=de&'+
 'callback=translate'+elementID+'&q=' + sourceText;
 newScript.src = source;

 // When we add this script to the head, the request is sent off.
 document.getElementsByTagName('head')[0].appendChild(newScript);
}

Затем для каждого элемента вы можете вызвать translateElement(<id>)</id>

licensed under cc by-sa 3.0 with attribution.