之前说过 jQuery.I18N.JS 来做网站的中英翻译, 前提就得做一套中文内容, 一套英文内容来解决, 好处是中英翻译可以准确无误, 本篇文章我们来看一下调用百度翻译的 API 来进行网站的翻译, 但是翻译可能会有些许不如意, 毕竟是机器翻译嘛.
前期准备: md5.JS 和 jQuery.JS
百度翻译技术文档为我们做了不同语言的 demo:
我们现在要做的是 JS 的 demo.
前提是我们得注册百度翻译账号, 然后才能获取到 appid 和 key.
我们下载下来的 JS demo 如下:
- <!doctype html>
- <head>
- <meta charset="utf-8"/>
- </head>
- <body>
- <div > 可打开浏览器控制台查看结果 </div>
- <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
- <script src="./md5.js"></script>
- <script type="text/javascript">
- var appid = '2015063000000001';
- var key = '12345678';
- var salt = (new Date).getTime();
- var query = 'apple';
- // 多个 query 可以用 \ n 连接 如 query='apple\norange\nbanana\npear'
- var from = 'en';
- var to = 'zh';
- var str1 = appid + query + salt +key;
- var sign = MD5(str1);
- $.Ajax({
- url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
- type: 'get',
- dataType: 'jsonp',
- data: {
- q: query,
- appid: appid,
- salt: salt,
- from: from,
- to: to,
- sign: sign
- },
- success: function (data) {
- console.log(data);
- }
- });
- </script>
- </body>
根据上面的 demo 我们可以发现需要 appid 和 key 两个必须字段, 然后将根据 demo 将我们需要翻译的内容根据 Ajax 传参就可以了. 根据上面的 demo, 我们做出一下方法:
- <!doctype HTML>
- <head>
- <meta charset="utf-8"/>
- </head>
- <body>
- <div class="main">
- <p > 苹果 </p>
- </div>
- <script src="./jquery-1.11.3.min.js"></script>
- <script src="./md5.js"></script>
- <script type="text/javascript">
- function GetBaidu(query, obj) {
- var q = query;
- var appid = "2015063000000001"; // 请自行获取
- var key = "12345678"; // 请自行获取
- var salt = (new Date).getTime();
- var str1 = appid + q + salt + key;
- var sign = MD5(str1);
- $.Ajax({
- url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
- type: 'post',
- dataType: 'jsonp',
- data: {
- q: q,
- from: 'auto',
- to: 'en',
- appid: appid,
- salt: salt,
- sign: sign
- },
- success: function (msg) {
- console.log(msg)
- var HTML = "";
- for (var i = 0; i <msg.trans_result.length; i++) {
- console.log(msg.trans_result[i].dst);
- HTML += msg.trans_result[i].dst
- }
- obj.HTML(HTML)
- }
- });
- }
- var text = $('.main p').HTML(function (i, text) {
- GetBaidu(text, $(this));
- });
- </script>
- </body>
运行结果如下:
我们发现确实给我们翻译出了 苹果, 翻译结果还是很准确的, 但是当我们再多加几个名称, 如香蕉, 橘子, 如下:
- <div class="main">
- <p > 苹果 </p>
- <p > 香蕉 </p>
- <p > 橘子 </p>
- </div>
我们再调用上面的 GetBaidu( ) 的方法, 运行结果如下:
我们发现返回一个 54003 的错误码, 通过百度翻译的技术开发文档我们知道该错误码为:
这就比较尴尬了, 不能频率过高, 那我们该如何是好呢?
在我们下载的 demo 中有这样一句话:
// 多个 query 可以用 \ n 连接 如 query='apple\norange\nbanana\npear'
那我们可以将我们想翻译的内容拼成上述形式, 值请求一次 Ajax 请求就可以了, 如下:
- <!doctype HTML>
- <head>
- <meta charset="utf-8"/>
- </head>
- <body>
- <div class="main">
- <button class="btn"> 点击切换 </button>
- <p transfer-toggle="transfer"> 苹果 </p>
- <p transfer-toggle="transfer"> 香蕉 </p>
- <p transfer-toggle="transfer"> 橘子 </p>
- </div>
- <script src="./jquery-1.11.3.min.js"></script>
- <script src="./md5.js"></script>
- <script type="text/javascript">
- function getArr() {
- var arrHtml = [];
- var arrThis = [];
- var text = $("[transfer-toggle='transfer']").text(function (i, text) {
- // console.log(i + text.replace("\n", "").replace(/\s+/g,' '));
- arrHtml.push(text.replace("\n", " ")); // 将我们想要翻译的内容存进数组里, 并且将回车 \n 匹配成空格, 避免翻译时 \n 与我们定义的冲突
- arrThis.push($(this))
- });
- return [arrHtml, arrThis]
- }
- function GetBaidu(from, to, query, obj) {
- console.log(query)
- var q = query.join("\n"); // 将内容数组用 \n 拼接
- var appid = "2015063000000001"; // 请自行获取
- var key = "12345678"; // 请自行获取
- var salt = (new Date).getTime();
- var str1 = appid + q + salt + key;
- var sign = MD5(str1);
- $.Ajax({
- url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
- type: 'post',
- dataType: 'jsonp',
- data: {
- q: q,
- from: from,
- to: to,
- appid: appid,
- salt: salt,
- sign: sign
- },
- success: function (msg) {
- var HTML = "";
- for (var i = 0; i <msg.trans_result.length; i++) {
- console.log(msg.trans_result[i].dst);
- HTML = msg.trans_result[i].dst;
- obj[i].HTML(HTML)
- }
- }
- });
- }
- var num = 0;
- $(".btn").on("click", function () {
- if (num === 0) {
- num = 1;
- GetBaidu("zh", "en", getArr()[0], getArr()[1]);
- } else {
- num = 0;
- GetBaidu("en", "zh", getArr()[0], getArr()[1]);
- }
- })
- </script>
- </body>
最终结果如下:
第一次点击
第二次点击
第三次点击
第四次点击
我们发现经过几次点击最后的 橘子 已经被翻译成了橙色, 翻译的不是很友好, 但整体来说还是挺好的.
需要注意的是我们点击按钮的频率不能太快了, 否则灰分 50043 的错误码, 因为我们的请求频率过快了.
来源: https://www.cnblogs.com/weijiutao/p/11315726.html