API调用每个使用JS

huangapple
go评论93阅读模式
英文:

API call for each using JS

问题

我正在使用Google API和JS点击外部来将第一个输入转换为目标语言。

我想从第一个输入中转换成多种语言，我已经添加了另一种目标语言——乌尔都语。

我需要这样的方式，当我在第一个框中输入内容时，它会同时转换成西班牙语和乌尔都语。

  1. let $ = el => document.querySelector(el);
  3. $('#input').addEventListener('keyup', function() {
  4.   var text = this.value;
  5.   doGet(text);
  6. }, false);
  8. function doGet(txt) {
  9.   var sourceText = txt;  
  10.   var sourceLang = 'en';
  11.   var targetLang = $(".targee").value;
  12.     
  13.   var url = "https://translate.googleapis.com/translate_a/single?client=gtx&sl=" 
  14.             + sourceLang + "&tl=" + targetLang + "&dt=t&q=" + encodeURI(sourceText);
  15.   
  16.   $('.translated').value = 'LOADING...';
  17.   var request = new XMLHttpRequest();
  18.   request.open('GET', url, true);
  20.   request.onload = () => {
  21.     if (request.status >= 200 && request.status < 400) {
  22.       // Success!
  23.       let data = JSON.parse(request.responseText);
  24.       let finaltext = '';
  25.       for (let i = 0; i < data[0].length; i++) {
  26.         finaltext += data[0][i][0];
  27.       }
  28.       $('.translated').value = finaltext;
  29.     }
  30.   };
  31.   request.send();
  32. }
  1. h2, h3 {
  2.   margin: 0 auto;
  3. }
  4. .boxes {
  5.   display: flex;
  6.   flex-direction: row;
  7.   align-items: center;
  8.   justify-content: space-around;
  9.   max-width: 1000px;
  10.   margin: 0 auto;
  11. }
  12. .box {
  13.   width: 40%;
  14. }
  16. textarea {
  17.   display: block;
  18.   width: 100%;
  19.   min-height: 160px;
  20.   margin: 5px auto 20px;
  21.   border-width: 2px;
  22.   resize: none;
  23.   
  24.   &:focus {
  25.     border: 2px solid black;
  26.     outline: none;
  27.   }
  28. }
  29. .btn-row {
  30.   text-align: center;
  31.   margin: 10px auto;
  32. }
  1. <div class="boxes">
  2.   <div class="box">
  3.     <h2>Input</h2>
  4.     <input id="input">
  5.   </div>
  6.   
  7.   <div class="box">
  8.     <h2>Spanish</h2>
  9.     <input value="es" class="targee">
  10.     <input id="es" class="translated">
  11.   </div>
  12.   
  13.   <div class="box">
  14.     <h2>Urdu</h2>
  15.     <input value="ur" class="targee">
  16.     <input id="ur" class="translated">
  17.   </div>
  18. </div>
英文:

I am using Google API and JS click outside to convert the first input into targeted language.

I want to convert into multiple language from first input, I have added another Targeted language as URDU.

I need in such a way, when I give input in first box, it gets converted into Spanish as well as Urdu.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let $ = el =&gt; document.querySelector(el);
  3. $(&#39;#input&#39;).addEventListener(&#39;keyup&#39;, function() {
  4.   var text = this.value;
  5.   doGet(text);
  6. }, false);
  8. function doGet(txt) {
  9.   var sourceText = txt;  
  10.   var sourceLang = &#39;en&#39;;
  11.   var targetLang = $(&quot;.targee&quot;).value;
  12.     
  13.   var url = &quot;https://translate.googleapis.com/translate_a/single?client=gtx&amp;sl=&quot; 
  14.             + sourceLang + &quot;&amp;tl=&quot; + targetLang + &quot;&amp;dt=t&amp;q=&quot; + encodeURI(sourceText);
  15.   
  16.   $(&#39;.translated&#39;).value = &#39;LOADING...&#39;;
  17.   var request = new XMLHttpRequest();
  18.   request.open(&#39;GET&#39;, url, true);
  20.   request.onload = () =&gt; {
  21.     if (request.status &gt;= 200 &amp;&amp; request.status &lt; 400) {
  22.       // Success!
  23.       let data = JSON.parse(request.responseText);
  24.       let finaltext = &#39;&#39;;
  25.       for (let i = 0; i &lt; data[0].length; i++) {
  26.         finaltext += data[0][i][0];
  27.       }
  28.       $(&#39;.translated&#39;).value = finaltext;
  29.     }
  30.   };
  31.   request.send();
  32. }

<!-- language: lang-css -->

  1. h2, h3 {
  2.   margin: 0 auto;
  3. }
  4. .boxes {
  5.   display: flex;
  6.   flex-direction: row;
  7.   align-items: center;
  8.   justify-content: space-around;
  9.   max-width: 1000px;
  10.   margin: 0 auto;
  11. }
  12. .box {
  13.   width: 40%;
  14. }
  16. textarea {
  17.   display: block;
  18.   width: 100%;
  19.   min-height: 160px;
  20.   margin: 5px auto 20px;
  21.   border-width: 2px;
  22.   resize: none;
  23.   
  24.   &amp;:focus {
  25.     border: 2px solid black;
  26.     outline: none;
  27.   }
  28. }
  29. .btn-row {
  30.   text-align: center;
  31.   margin: 10px auto;
  32. }

<!-- language: lang-html -->

  1.   &lt;div class=&quot;boxes&quot;&gt;
  2.     &lt;div class=&quot;box&quot;&gt;
  3.       &lt;h2&gt;Input&lt;/h2&gt;
  4.       &lt;input id=&quot;input&quot;&gt;
  5.     &lt;/div&gt;
  6.     
  7.     &lt;div class=&quot;box&quot;&gt;
  8.       &lt;h2&gt;Spanish&lt;/h2&gt;
  9.       &lt;input value=&quot;es&quot; class=&quot;targee&quot;&gt;
  10.       &lt;input id=&quot;es&quot; class=&quot;translated&quot;&gt;
  11.     &lt;/div&gt;
  12.     
  13.     &lt;div class=&quot;box&quot;&gt;
  14.       &lt;h2&gt;Urdu&lt;/h2&gt;
  15.       &lt;input value=&quot;ur&quot; class=&quot;targee&quot;&gt;
  16.       &lt;input id=&quot;ur&quot; class=&quot;translated&quot;&gt;
  17.     &lt;/div&gt;
  18.   
  19.   &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 2

如果您想要使用Google翻译API来进行多语言翻译，您可以循环向API URL发送请求。为了避免数据同步错误，您可以使用JavaScript的Promise和异步函数。

  1. let $ = el => document.querySelector(el);
  2. let $$ = el => document.querySelectorAll(el);
  4. $('#input').addEventListener('keyup', function() {
  5.   var text = this.value;
  6.   doGet(text);
  7. }, false);
  9. async function doGet(txt) {
  10.   var sourceText = txt;  
  11.   var sourceLang = 'en';
  12.   var targetLangs = $$(".targee");
  13.   var request;
  14.   var url; 
  15.   
  16.   for(var j = 0; j < targetLangs.length; j++) {
  17.     url = "https://translate.googleapis.com/translate_a/single?client=gtx&sl=" 
  18.             + sourceLang + "&tl=" + targetLangs[j].value + "&dt=t&q=" + encodeURI(sourceText);
  19.     $('.translated')[j].value = 'LOADING...';
  20.     $('.translated')[j].value = await translate(url);
  21.   }
  22. }
  24. async function translate(url) {
  25.   return new Promise((resolve, reject) => {
  26.     request = new XMLHttpRequest();
  27.     request.open('GET', url, true);
  29.     request.onload = () => {
  30.       if (request.readyState == 4 && request.status >= 200 && request.status < 400) {
  31.         // 请求成功！
  32.         let data = JSON.parse(request.responseText);
  33.         if(data[0]) {
  34.           let finaltext = '';
  35.           for (let i = 0; i < data[0].length; i++) {
  36.             finaltext += data[0][i][0];
  37.           };
  38.           resolve(finaltext);
  39.         } else {
  40.           resolve('');
  41.         }
  42.       } else {
  43.         // 错误！
  44.         reject("error: " + request.statusText);
  45.       }
  46.     };
  47.     request.send();
  48.   });
  49. }
  1. h2, h3 {
  2.   margin: 0 auto;
  3. }
  4. .boxes {
  5.   display: flex;
  6.   flex-direction: row;
  7.   align-items: center;
  8.   justify-content: space-around;
  9.   max-width: 1000px;
  10.   margin: 0 auto;
  11. }
  12. .box {
  13.   width: 40%;
  14. }
  16. textarea {
  17.   display: block;
  18.   width: 100%;
  19.   min-height: 160px;
  20.   margin: 5px auto 20px;
  21.   border-width: 2px;
  22.   resize: none;
  23.   
  24.   &:focus {
  25.     border: 2px solid black;
  26.     outline: none;
  27.   }
  28. }
  29. .btn-row {
  30.   text-align: center;
  31.   margin: 10px auto;
  32. }
  1. <div class="boxes">
  2.   <div class="box">
  3.     <h2>Input</h2>
  4.     <input id="input">
  5.   </div>
  6.   
  7.   <div class="box">
  8.     <h2>Spanish</h2>
  9.     <input value="es" class="targee">
  10.     <input id="es" class="translated">
  11.   </div>
  12.   
  13.   <div class="box">
  14.     <h2>Urdu</h2>
  15.     <input value="ur" class="targee">
  16.     <input id="ur" class="translated">
  17.   </div>
  18. </div>
英文:

If you want to use the google translate API for multi-languages, you can loop the request to the API URL. To avoid errors in data synchronization, you can use Javascript Promise and async function.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let $ = el =&gt; document.querySelector(el);
  2. let $$ = el =&gt; document.querySelectorAll(el);
  3. $(&#39;#input&#39;).addEventListener(&#39;keyup&#39;, function() {
  4. var text = this.value;
  5. doGet(text);
  6. }, false);
  7. async function doGet(txt) {
  8. var sourceText = txt;  
  9. var sourceLang = &#39;en&#39;;
  10. var targetLangs = $$(&quot;.targee&quot;);
  11. var request;
  12. var url; 
  13. for(var j = 0; j &lt; targetLangs.length; j++) {
  14. url = &quot;https://translate.googleapis.com/translate_a/single?client=gtx&amp;sl=&quot; 
  15. + sourceLang + &quot;&amp;tl=&quot; + targetLangs[j].value + &quot;&amp;dt=t&amp;q=&quot; + encodeURI(sourceText);
  16. $$(&#39;.translated&#39;)[j].value = &#39;LOADING...&#39;;
  17. $$(&#39;.translated&#39;)[j].value = await translate(url);
  18. }
  19. }
  20. async function translate(url) {
  21. return new Promise((resolve, reject) =&gt; {
  22. request = new XMLHttpRequest();
  23. request.open(&#39;GET&#39;, url, true);
  24. request.onload = () =&gt; {
  25. if (request.readyState == 4 &amp;&amp; request.status &gt;= 200 &amp;&amp; request.status &lt; 400) {
  26. // Success!
  27. let data = JSON.parse(request.responseText);
  28. if(data[0]) {
  29. let finaltext = &#39;&#39;;
  30. for (let i = 0; i &lt; data[0].length; i++) {
  31. finaltext += data[0][i][0];
  32. };
  33. resolve(finaltext);
  34. } else {
  35. resolve(&#39;&#39;);
  36. }
  37. } else {
  38. // Error!
  39. reject(&quot;error: &quot;+request.statusText);
  40. }
  41. };
  42. request.send();
  43. });
  44. }

<!-- language: lang-css -->

  1. h2, h3 {
  2.   margin: 0 auto;
  3. }
  4. .boxes {
  5.   display: flex;
  6.   flex-direction: row;
  7.   align-items: center;
  8.   justify-content: space-around;
  9.   max-width: 1000px;
  10.   margin: 0 auto;
  11. }
  12. .box {
  13.   width: 40%;
  14. }
  16. textarea {
  17.   display: block;
  18.   width: 100%;
  19.   min-height: 160px;
  20.   margin: 5px auto 20px;
  21.   border-width: 2px;
  22.   resize: none;
  23.   
  24.   &amp;:focus {
  25.     border: 2px solid black;
  26.     outline: none;
  27.   }
  28. }
  29. .btn-row {
  30.   text-align: center;
  31.   margin: 10px auto;
  32. }

<!-- language: lang-html -->

  1.   &lt;div class=&quot;boxes&quot;&gt;
  2.     &lt;div class=&quot;box&quot;&gt;
  3.       &lt;h2&gt;Input&lt;/h2&gt;
  4.       &lt;input id=&quot;input&quot;&gt;
  5.     &lt;/div&gt;
  6.     
  7.     &lt;div class=&quot;box&quot;&gt;
  8.       &lt;h2&gt;Spanish&lt;/h2&gt;
  9.       &lt;input value=&quot;es&quot; class=&quot;targee&quot;&gt;
  10.       &lt;input id=&quot;es&quot; class=&quot;translated&quot;&gt;
  11.     &lt;/div&gt;
  12.     
  13.     &lt;div class=&quot;box&quot;&gt;
  14.       &lt;h2&gt;Urdu&lt;/h2&gt;
  15.       &lt;input value=&quot;ur&quot; class=&quot;targee&quot;&gt;
  16.       &lt;input id=&quot;ur&quot; class=&quot;translated&quot;&gt;
  17.     &lt;/div&gt;
  18.   
  19.   &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月6日 05:09:16
  • 转载请务必保留本文链接：https://go.coder-hub.com/75355522.html
  • google-translate
  • google-translation-api
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定