调用百度翻译 API 来翻译网站信息
之前说过jquery.i18n.js 来做网站的中英翻译，前提就得做一套中文内容，一套英文内容来解决，好处是中英翻译可以准确无误，本篇文章我们来看一下调用百度翻译的 API 来进行网站的翻译，但是翻译可能会有些许不如意，毕竟是机器翻译嘛。
前期准备：md5.js 和 jquery.js
百度翻译技术文档为我们做了不同语言的 demo：http://api.fanyi.baidu.com/api/trans/product/apidoc
我们现在要做的是 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 的错误码，因为我们的请求频率过快了。
调用百度翻译 API 来翻译网站信息的更多相关文章
- 调用百度地图api隐藏版权信息
调用百度地图API隐藏右下角版权信息 商用的话建议不要隐藏,避免侵权. 隐藏前: 隐藏后: .BMap_cpyCtrl { display: none; } .anchorBL { display: ...
- 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API
使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...
- HTML5调用百度地图API进行地理定位实例
自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发.虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情.今天为大家带来的是使用HTML5调用百度地图AP ...
- 调用百度地图API的总结
因为项目要用到百度地图,所以先摸索了一下,各种功能官方都有文档,点击可查看,文章的话我就直接写我用到的功能例子了,要用可以直接复制粘贴~ 一.主要涉及到的几个接口(先申请密钥): 1.技术一:坐标转换 ...
- web开发调用百度地图API + AK申请
web开发调用百度地图API + AK申请 要使用百度地图的API我们首先需要在我们的html页面引入js----`` 如何获取百度地图ak: 1.登陆百度地图开发者平台 2.注册百度开发者账号并登陆 ...
- Python调用百度地图API实现批量经纬度转换为实际省市地点（api调用，json解析，excel读取与写入）
1.获取秘钥 调用百度地图API实现得申请百度账号或者登陆百度账号,然后申请自己的ak秘钥.链接如下:http://lbsyun.baidu.com/apiconsole/key?applicatio ...
- scrapy爬虫框架调用百度地图api数据存入数据库
scrapy安装配置不在本文 提及, 1.在开始爬取之前,必须创建一个新的Scrapy项目.进入自定义的项目目录中,运行下列命令 scrapy startproject mySpider 其中, my ...
- 调用百度地图Api实现的查看地图功能的小插件
1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...
- 【c#】Form调用百度地图api攻略及常见问题
首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...
- HTML5调用百度地图API获取当前位置并直接导航目的地的方法
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8&quo ...
随机推荐
- 5. xadmin 后台搭建
要维护他人产权,就不喽了,直接飞机 Django1.11.11使用xadmin的方法(一: 快速安装篇):https://www.jianshu.com/p/bcb74595213e Django1. ...
- java高并发系列 - 第12天JUC:ReentrantLock重入锁
java高并发系列 - 第12天JUC:ReentrantLock重入锁 本篇文章开始将juc中常用的一些类,估计会有十来篇. synchronized的局限性 synchronized是java内置 ...
- linux下运行python3出现TypeError: a bytes-like object is required, not 'str'
目标:用python将中文存入csv,且中文正常显示. 环境:linux,python3 百度N久,方法都不行或是比较复杂. 以上代码用python3运行后,出现TypeError: a bytes- ...
- Lock和synchronized比较详解(转)
从Java5之后,在java.util.concurrent.locks包下提供了另外一种方式来实现同步访问,那就是Lock. 也许有朋友会问,既然都可以通过synchronized来实现同步访问了, ...
- Code Review最佳实践
我一直认为Code Review(代码审查)是软件开发中的最佳实践之一,可以有效提高整体代码质量,及时发现代码中可能存在的问题.包括像Google.微软这些公司,Code Review都是基本要求,代 ...
- c语言进阶10-算法
一. 数据结构和算法关系 为什么要学数据结构和算法? 通常,计算机解决问题的步骤如下: 在数学模型中,计算机处理的对象之间通常存在着一种最简单的线性关系,这类数学模型就是线性的数据结构.著名计算机科 ...
- [leetcode] 464. Can I Win (Medium)
原题链接 两个人依次从1~maxNum中选取数字(不可重复选取同一个),累和.当一方选取数字累和后结果大于等于给定的目标数字,则此人胜利. 题目给一个maxNum和targetNum,要求判断先手能否 ...
- 小白开学Asp.Net Core 《一》
在开篇中介绍了项目的搭建以及项目中所用到的第三方工具 本篇介绍SqlSugar和Dapper在本项目的实现 一.SqlSugar SqlSuagr的介绍就直接浏览官方网站,官网地址将在底部给出. 在本 ...
- vue-cli - webpack 打包兼容 360 浏览器和 IE 浏览器
index.html增加一行代码 <head> <meta charset="utf-8"> <meta name="viewport&qu ...
- Linux操作系统和Windows操作系统的区别
1.免费与收费 在中国,windows和linux都是免费的,至少对个人用户是如此,如果那天国内windows真的严打盗版了,那linux的春天就到了!但现在linux依然是任重道远,前路漫漫. 2. ...