使用百度翻译API实现一键翻译

程序员冰零

已于 2022-04-09 00:11:33 修改

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：百度翻译

于 2015-07-02 15:11:34 首次发布

本文链接：https://blog.youkuaiyun.com/zer0_o/article/details/46726939

js 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何利用百度翻译API实现后台管理界面的中英葡三语自动互译功能，包括API接入、参数设置、代码实现及测试验证，适合开发者快速集成翻译功能于现有项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// ～ 2022.04.09更新：
// 百度翻译API已转移到百度云翻译平台，以下接口变动部分请查看最新的文档
// ========================================================

尊敬的百度翻译开发者：
您好！
感谢您一直以来对百度翻译的信赖和支持。为了向您提供更稳定、高效、优质的服务，我们将百度翻译API服务全新升级至百度翻译开放云平台。
百度翻译开放云平台官网：http://api.fanyi.baidu.com

- 0x00 需求
接手一个项目，其中有个需求是：在后台管理界面，录入数据的时候能够自动将输入的中文内容翻译成英文和葡语。大概的界面就是这样的。
这里写图片描述

- 0x01 思路
既然是翻译，首先我想到的是强大的百度，肯定会有提供翻译的API.
http://developer.baidu.com/wiki/index.php?title=%E5%B8%AE%E5%8A%A9%E6%96%87%E6%A1%A3%E9%A6%96%E9%A1%B5/%E7%99%BE%E5%BA%A6%E7%BF%BB%E8%AF%91/%E7%BF%BB%E8%AF%91API

观察了下，其实实现起来很简单的嘛。

URL

http://openapi.baidu.com/public/2.0/bmt/translate

然后我只需要发送一些参数（具体请看API）就好了，既然这样那就开写吧。

- 0x02 实现

JS部分

/**
 * 百度翻譯API 
 * Create By William on 2015-07-02
 */
var transaction = function() {
	var _url = 'http://openapi.baidu.com/public/2.0/bmt/translate';
	var _appkey = '你的APPKEY'; // 这里需要APPKEY，去百度开放平台创建个工程就有了http://developer.baidu.com/console#app/project
	
	/**
	 * 发送参数并获取翻译内容
	 * 
	 */
	var post = function(context, to, toId) {
		var _params = '';
		_params += 'client_id=' + _appkey;
		_params += '&q=' + context;
		_params += '&from=zh';
		_params += '&to=' + to;

		$.ajax({
        url: _url,
        data: _params,
        type: 'GET',
        dataType: 'jsonp',
        success: function (data) {
        	if (!!data && !data.error_code) {
        		$('#' + toId).val(data.trans_result[0].dst);
        	} else {
        		alert('轉換' + to + '失敗!');
        	}
        }
    });
	};
	
	return {
		
		/**
		 * @param zh 中文输入框id
		 * @param en 英文输入框id
		 * @param pt 葡萄牙语输入框id
		 */
		translate : function(zh, en, pt) {
			// 获取需要翻译的中文
			var context = $('#' + zh).val();
			// 判斷內容是否為空
			if (!context) {
				alert('請錄入中文內容!');
				return;
			}
			// 转换为英文
			post(context, 'en', en);
			// 转换为葡语
			post(context, 'pt', pt);
		}
	};
}();

HTML部分

<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="transaction.js"></script>
</head>

<body>
	<br/><br/>
	<textarea id="cn" rows="20" cols="150"></textarea> （中文）<a href="javascript:void(0);" onclick="transaction.translate('cn', 'en', 'pt');" >翻译</a><br/><br/>
	<textarea id="en" rows="20" cols="150"></textarea> （英文）<br/><br/>
	<textarea id="pt" rows="20" cols="150"></textarea> （葡语）
	
	
</body>
</html>

- 0x03 后记
测试了下，完全满足需求呢。代码写得不是很好，主要是记录下来方便以后使用，也给需要的朋友一个参考。