博客

我正在尝试翻译网页上的多个字段，并将最终输出组合在一起，如下所示：

NOT AN OFFICIAL TRANSLATION. FOR REFERENCE USE ONLY.

Field_Name: Translation

Field_Name2: Translation

Field_Name3: Translation

来自python繁重的背景，只有很少的javascript经验，我发现这非常困难。以下代码完成85％-90％。我成功地抓住了字段名称和文本，调用了翻译api并返回了翻译。我的问题是将它串在一起作为一个警报而不是每个翻译的单独警报。由于ajax的性质，我理解在异步请求之外返回数据很困难。我认为我在ajax请求中调用另一个函数是在正确的轨道上，但我想知道是否有更好的方法来做到这一点。

//Gathers all the field names and text associated with them.

$(document).ready(function() {

var allSpans = document.getElementsByTagName(‘span’);

var spanlist = [];

var x = 0;

var ajax_data = [];

var fieldlabels = [];

[].slice.call(allSpans).forEach(function(span) {

if(span.className === ‘readonlyfield’) {

if(span.textContent) {

var spanobject = {};

var textfrom = ‘en’;

var textto = ‘it’;

var text = span.innerText;

var parentelem = document.getElementById(span.parentNode.id);

var parenttext = parentelem.innerText;

fieldlabels.push(parenttext + ‘: ‘);

spanobject.parentfield = span.parentNode.id;

spanobject.parenttext = parenttext;

spanobject.textfrom = textfrom;

spanobject.textto = textto;

spanobject.text = text;

spanlist.push(spanobject);

x++;

}

}

});

var translatebutton = document.createElement(‘button’);

translatebutton.setAttribute(“id”, x);

translatebutton.innerText = ‘Translate!’;

document.body.appendChild(translatebutton);

var finaloutput = “FOR REFERENCE USAGE ONLY. NOT AN OFFICIAL TRANSLATION.” + ‘\n’;

// On button click translate all text gathered and alert the final output.

$(“button”).click(function(){

var outputdata = [];

for(var i = 0, len = spanlist.length; i < len ; i++){

var textfrom = spanlist[i].textfrom;

var textto = spanlist[i].textto;

var text = spanlist[i].text;

var urlservice = ‘MYTRANSLATIONURL==&text=’+text+’&textfrom=’+textfrom+’&textto=’+textto;

jQuery.support.cors = true;

$.ajax({

url: urlservice,

type: ‘GET’,

contentType: “text/html”,

success: function (data) {

getsomedata(data);

},

error: function (x, y, z) {

alert(x + ‘\n’ + y + ‘\n’ + z);

}

});

function getsomedata(data) {

alert(data);

// The code below does not work, I was experimenting with an idea.

// ajax_data.push(data + ‘\n’);

}

// var temp = fieldlabels.concat(ajax_data);

// temp.toString();

};

});

});

感谢Andrew我能够解决这个问题，以下代码是我遇到类似困难的人的最终解决方案：

$(document).ready(function() {

var allSpans = document.getElementsByTagName(‘span’);

var spanlist = [];

var x = 0;

[].slice.call(allSpans).forEach(function(span) {

if(span.className === ‘readonlyfield’) {

if(span.textContent) {

var spanobject = {};

var textfrom = ‘en’;

var textto = ‘it’;

var text = span.innerText;

var parentelem = span.parentNode.id;

//REGEX to find field captions in my particular system.

var captionID = parentelem.replace(/((TD))?/, “TDCAP”);

var captionelem = document.getElementById(captionID);

var caption = captionelem.innerText;

spanobject.spanparent = span.parentNode.id;

spanobject.captionfield = captionelem;

spanobject.caption = caption;

spanobject.textfrom = textfrom;

spanobject.textto = textto;

spanobject.text = text;

spanlist.push(spanobject);

x++;

}

}

});

var translatebutton = document.createElement(‘button’);

translatebutton.setAttribute(“id”, x);

translatebutton.innerText = ‘Translate!’;

document.body.appendChild(translatebutton);

var finaloutput = “FOR REFERENCE USAGE ONLY. NOT AN OFFICIAL TRANSLATION.” + ‘\n’;

$(“button”).click(function(){

var outputdata = [];

var completedRequests = 0;

for(var i = 0, len = spanlist.length; i < len ; i++){

var textfrom = spanlist[i].textfrom;

var textto = spanlist[i].textto;

var text = spanlist[i].text;

let parentLet = spanlist[i].spanparent;

let textLet = spanlist[i].text;

let captionfield = spanlist[i].captionfield;

let caption = spanlist[i].caption;

var urlservice = ‘MYTRANSLATIONURL==&text=’+text+’&textfrom=’+textfrom+’&textto=’+textto;

jQuery.support.cors = true;

$.ajax({

url: urlservice,

type: ‘GET’,

contentType: “text/html”,

success: function (data) {

datastring = caption + “: ” + data;

outputdata.push(datastring);

},

error: function (x, y, z) {

alert(x + ‘\n’ + y + ‘\n’ + z);

},

complete: function() {

if (++completedRequests >= len) {

getsomedata(outputdata);

}

}

});

function getsomedata(data) {

var finaldata = data.join(“\n\n”);

final = finaloutput + ‘\n’ + finaldata;

alert(final);

}

};

});

});