呼叫百度翻譯 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