h5+js+ajax+百度翻译API：实现翻译功能

互联网老杨

已于 2022-08-04 19:41:45 修改

阅读量727

点赞数

文章标签： servlet html javascript

于 2022-08-04 08:52:54 首次发布

本文链接：https://blog.csdn.net/weixin_39619708/article/details/126152587

版权

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>H5调用百度API翻译</title>
	<link href="http://ayuednew.aykj.wang/subsiteSrc/mainpc/style/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="clear:both;overflow:hidden;margin:0 100px; text-align:right;padding:20px 0;">
	<button style="font-size:16px; font-weight:bold; padding:5px;" id="Click" name="Click">英文版本</button>
</div>

<div class="pageBox" style="margin:0 100px; font-size:18px; line-height:36px;">
    <div class="srcText">
    
1939 年 6 月 1 日，南侨总会发出《第十六号通告》代募后方勤务部汽车司机二百人。南侨总会此次征募跟以前不同。“以前征募各批机工回国服务，乃承昆明西南运输处主任宋子良先生所委托，系作滇缅公路运输之用，前后六批，近二千名。”“此次征募由央军事委员会勤务部俞飞鹏部长转奉
蒋委座电令，此应战区械弹给养补充输送事宜。
    
    </div>
</div>
 

 
</body>
<!--jquery.min.js文件可自行百度下载  -->
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<!--md5.js是百度翻译开放平台上下载的demo中的文件  -->
<script src="js/md5.js"></script>   
<script type="text/javascript">
 
	var appid = 'xxx';  //放自己在百度上申请的APP ID
	var key = 'xxx';  //放自己在百度上申请的密钥
	var salt = (new Date).getTime();
	var from = 'zh';
	var to = 'en';
	 
	$("#Click").click(function (){   //点击按钮调用，引用jquery语法
	var contents = $(".srcText").html() 
	// alert(contents) 
	 
	var str1 = appid + contents + salt +key;
	var sign = MD5(str1);
	 
	$.ajax({
		   type:"get",  //使用get方法请求
		   async:false,													//must be synchronized
		   url:"http://api.fanyi.baidu.com/api/trans/vip/translate",
		   dataType:"jsonp",
		   data: {   
			 q: contents,  //被翻译的内容，实现英译汉
			 from: from,   //源语言，英文
			 to: to,       //翻译的语言，中文
			 appid: appid,  
			 salt: salt,    
			 sign: sign  //MD5加密后的内容
		   },	
		   success:function(data){
				console.log(data);
				$(".srcText").html() ;
				for ( var i = 0 ; i < data.trans_result.length ; i++ )
				{
					$(".srcText").html(data.trans_result[i].dst) ;
				}
			 
		  },
		  error:function(){
			  alert('Fail to translate with baidu API!');
		  }
	});
	}) ;
</script>
</html>

地址：百度翻译开放平台