呼叫百度翻譯 API 來翻譯網站資訊
阿新 • • 發佈:2019-08-16
之前說過jquery.i18n.js 來做網站的中英翻譯,前提就得做一套中文內容,一套英文內容來解決,好處是中英翻譯可以準確無誤,本篇文章我們來看一下呼叫百度翻譯的 API 來進行網站的翻譯,但是翻譯可能會有些許不如意,畢竟是機器翻譯嘛。
前期準備:md5.js 和 jquery.js
百度翻譯技術文件為我們做了不同語言的 demo:http://api.fanyi.baidu.com/api/trans/product/apidoc
我們現在要做的是 js 的 demo。
前提是我們得註冊百度翻譯賬號,然後才能獲取到 appid 和 key。
我們下載下來的 js demo 如下:
1 <!doctype html> 2 <head> 3 <meta charset="utf-8"/> 4 </head> 5 <body> 6 <div>可開啟瀏覽器控制檯檢視結果</div> 7 <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> 8 <script src="./md5.js"></script> 9 <script type="text/javascript"> 10 var appid = '2015063000000001'; 11 var key = '12345678'; 12 var salt = (new Date).getTime(); 13 var query = 'apple'; 14 // 多個query可以用\n連線 如 query='apple\norange\nbanana\npear' 15 var from = 'en'; 16 var to = 'zh'; 17 var str1 = appid + query + salt +key; 18 var sign = MD5(str1); 19 $.ajax({ 20 url: 'http://api.fanyi.baidu.com/api/trans/vip/translate', 21 type: 'get', 22 dataType: 'jsonp', 23 data: { 24 q: query, 25 appid: appid, 26 salt: salt, 27 from: from, 28 to: to, 29 sign: sign 30 }, 31 success: function (data) { 32 console.log(data); 33 } 34 }); 35 36 </script> 37 </body>
根據上面的 demo 我們可以發現需要 appid 和 key 兩個必須欄位,然後將根據 demo 將我們需要翻譯的內容根據 ajax 傳參就可以了。根據上面的 demo,我們做出一下方法:
1 <!doctype html> 2 <head> 3 <meta charset="utf-8"/> 4 </head> 5 <body> 6 <div class="main"> 7 <p>蘋果</p> 8 </div> 9 <script src="./jquery-1.11.3.min.js"></script> 10 <script src="./md5.js"></script> 11 <script type="text/javascript"> 12 13 function GetBaidu(query, obj) { 14 var q = query; 15 var appid = "2015063000000001"; // 請自行獲取 16 var key = "12345678"; // 請自行獲取 17 var salt = (new Date).getTime(); 18 var str1 = appid + q + salt + key; 19 var sign = MD5(str1); 20 $.ajax({ 21 url: 'http://api.fanyi.baidu.com/api/trans/vip/translate', 22 type: 'post', 23 dataType: 'jsonp', 24 data: { 25 q: q, 26 from: 'auto', 27 to: 'en', 28 appid: appid, 29 salt: salt, 30 sign: sign 31 }, 32 success: function (msg) { 33 console.log(msg) 34 var html = ""; 35 for (var i = 0; i < msg.trans_result.length; i++) { 36 console.log(msg.trans_result[i].dst); 37 html += msg.trans_result[i].dst 38 } 39 obj.html(html) 40 } 41 }); 42 } 43 44 var text = $('.main p').html(function (i, text) { 45 GetBaidu(text, $(this)); 46 }); 47 48 </script> 49 </body>
執行結果如下:
我們發現確實給我們翻譯出了 蘋果,翻譯結果還是很準確的,但是當我們再多加幾個名稱,如香蕉,橘子,如下:
1 <div class="main"> 2 <p>蘋果</p> 3 <p>香蕉</p> 4 <p>橘子</p> 5 </div>
我們再呼叫上面的 GetBaidu( ) 的方法,執行結果如下:
我們發現返回一個 54003 的錯誤碼,通過百度翻譯的技術開發文件我們知道該錯誤碼為:
這就比較尷尬了,不能頻率過高,那我們該如何是好呢?
在我們下載的 demo 中有這樣一句話:
// 多個query可以用\n連線 如 query='apple\norange\nbanana\npear'
那我們可以將我們想翻譯的內容拼成上述形式,值請求一次 ajax 請求就可以了,如下:
1 <!doctype html> 2 <head> 3 <meta charset="utf-8"/> 4 </head> 5 <body> 6 <div class="main"> 7 <button class="btn">點選切換</button> 8 <p transfer-toggle="transfer">蘋果</p> 9 <p transfer-toggle="transfer">香蕉</p> 10 <p transfer-toggle="transfer">橘子</p> 11 </div> 12 <script src="./jquery-1.11.3.min.js"></script> 13 <script src="./md5.js"></script> 14 <script type="text/javascript"> 15 16 function getArr() { 17 var arrHtml = []; 18 var arrThis = []; 19 var text = $("[transfer-toggle='transfer']").text(function (i, text) { 20 // console.log(i + text.replace("\n", "").replace(/\s+/g, ' ')); 21 arrHtml.push(text.replace("\n", " ")); // 將我們想要翻譯的內容存進數組裡,並且將回車 \n 匹配成空格,避免翻譯時 \n 與我們定義的衝突 22 arrThis.push($(this)) 23 }); 24 return [arrHtml, arrThis] 25 } 26 27 28 function GetBaidu(from, to, query, obj) { 29 console.log(query) 30 var q = query.join("\n"); // 將內容陣列用 \n 拼接 31 var appid = "2015063000000001"; // 請自行獲取 32 var key = "12345678"; // 請自行獲取 33 var salt = (new Date).getTime(); 34 var str1 = appid + q + salt + key; 35 var sign = MD5(str1); 36 $.ajax({ 37 url: 'http://api.fanyi.baidu.com/api/trans/vip/translate', 38 type: 'post', 39 dataType: 'jsonp', 40 data: { 41 q: q, 42 from: from, 43 to: to, 44 appid: appid, 45 salt: salt, 46 sign: sign 47 }, 48 success: function (msg) { 49 var html = ""; 50 for (var i = 0; i < msg.trans_result.length; i++) { 51 console.log(msg.trans_result[i].dst); 52 html = msg.trans_result[i].dst; 53 obj[i].html(html) 54 } 55 } 56 }); 57 } 58 59 60 var num = 0; 61 $(".btn").on("click", function () { 62 if (num === 0) { 63 num = 1; 64 GetBaidu("zh", "en", getArr()[0], getArr()[1]); 65 } else { 66 num = 0; 67 GetBaidu("en", "zh", getArr()[0], getArr()[1]); 68 } 69 }) 70 71 72 </script> 73 </body>
最終結果如下:
第一次點選
第二次點選
第三次點選
第四次點選
我們發現經過幾次點選最後的 橘子 已經被翻譯成了橙色,翻譯的不是很友好,但整體來說還是挺好的。
需要注意的是我們點選按鈕的頻率不能太快了,否則灰分 50043 的錯誤碼,因為我們的請求頻率過快了。
&n