HTML实现调用百度在线翻译API

    

        HTML实现调用百度在线翻译API                         

本文章已收录于:        
 

 

  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Translate</title>  
  6. </head>  
  7. <body>  
  8. <div id="SRC">  
  9. <textarea id="srcText" name="srcText " style="width:500px; height:120px;">  
  10. </textarea>  
  11.   
  12. <button id="Click" name="Click">Translate</button>  
  13. </div>  
  14.   
  15. <br />   
  16. <hr />  
  17. <div id="DST">  
  18. <textarea id="dstText" name="dstText" style="width:500px; height:120px;">  
  19. </textarea>  
  20. </div>  
  21.   
  22.   
  23. </body>  
  24. <script src="jquery-1.8.2.min.js" type="text/javascript"></script>  
  25. <script type="text/javascript">  
  26.    
  27. $("#Click").click(function (){  
  28.   
  29. var contents = $("#srcText").val() ;  
  30. alert(  contents) ;  
  31.   
  32.   
  33. $.ajax({  
  34.        type:"get",  
  35.        async:false,                                                 //must be synchronized  
  36.        url:"http://openapi.baidu.com/public/2.0/bmt/translate",  
  37.        dataType:"jsonp",  
  38.        data: {  
  39.            from: "zh",                                              //language choose  
  40.            to: "en",  
  41.            client_id:  这个地方输入你自己在百度开源申请的API 的 KEY,                  //baidu api key  
  42.            q: contents  
  43.        },     
  44.        success:function(json , status){  
  45.            
  46.             //alert("here is the status :"+status) ;  
  47.             $("#dstText").empty() ;  
  48.   
  49.             for ( var i = 0 ; i json.trans_result.length ; i++ )  
  50.             {  
  51.             $("#dstText").append( json.trans_result[i].dst  +" <br />") ;  
  52.             }  
  53.         //  alert(json.trans_result[0].dst +" <br /> "+json.trans_result[0].src) ;  
  54.            
  55.       },  
  56.       error:function(){  
  57.           alert('Fail to translate with baidu API!');  
  58.       }  
  59. });  
  60. }) ;  
  61.   
  62. </script>  
  63. </html>  
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Translate</title>
</head>
<body>
<div id="SRC">
<textarea id="srcText" name="srcText " style="width:500px; height:120px;">
</textarea>

<button id="Click" name="Click">Translate</button>
</div>

<br /> 
<hr />
<div id="DST">
<textarea id="dstText" name="dstText" style="width:500px; height:120px;">
</textarea>
</div>


</body>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
 
$("#Click").click(function (){

var contents = $("#srcText").val() ;
alert(  contents) ;


$.ajax({
	   type:"get",
	   async:false,													//must be synchronized
	   url:"http://openapi.baidu.com/public/2.0/bmt/translate",
	   dataType:"jsonp",
	   data: {
		   from: "zh",												//language choose
		   to: "en",
		   client_id:  这个地方输入你自己在百度开源申请的API 的 KEY,					//baidu api key
		   q: contents
	   },	
	   success:function(json , status){
		 
			//alert("here is the status :"+status) ;
			$("#dstText").empty() ;

			for ( var i = 0 ; i < json.trans_result.length ; i++ )
			{
			$("#dstText").append( json.trans_result[i].dst  +" <br />") ;
			}
		//	alert(json.trans_result[0].dst +" <br /> "+json.trans_result[0].src) ;
		 
	  },
	  error:function(){
		  alert('Fail to translate with baidu API!');
	  }
});
}) ;

</script>
</html>
 

 

转载于:https://www.cnblogs.com/sky20080101/p/6803124.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现谷歌在线翻译! //load方法 加载语言版本 当前版本号为1 google.load("language", "1"); //版本为1 function initialize() { //得到要翻译的内容 var text = document.getElementById("text").value; //要翻译成哪国语言 默认为中文 var toLanguage = document.getElementById("language").value; //调用google对象的检测要翻译的对象 arg1:要翻译的文本,arg2:回调函数 google.language.detect(text, function(result) { //如果返回值未出现错误(detect该函数用语检测,估计也有过滤的意思) if (!result.error && result.language) { //调用google语言api的翻译函数 //arg1:要翻译的内容,arg2:通过过滤后对象所属的语言格式,arg3:要转成的类型,arg4:回调函数 google.language.translate(text, result.language, toLanguage, function(result) { //获得要显示翻译结果textarea对象 var translated = document.getElementById("translation"); //如果对象被翻译成功 类似于java的jdbc结果集对象的 .next()方法 if (result.translation) { //设置要显示翻译结果textarea对象的html值 translated.innerHTML = result.translation; } }); } }); } // setOnLoadCallback 该函数 绑定页面加载完毕 调用initialize函数 类似于jQuery的 $(docuemnt).ready(function(){}) google.setOnLoadCallback(initialize); //选择由哪国语言翻译成另外一国语言 function to_language(str){ document.getElementById("language").value = str; if(str == "zh"){ document.getElementById("show").innerText = "英译汉"; }else if(str == "en"){ document.getElementById("show").innerText = "汉译英"; }
要在 JavaScript调用百度翻译 API,可以按照以下步骤进行操作: 1. 在百度开发者平台上创建一个账号,并创建一个翻译应用,获取 API 密钥。 2. 在你的 HTML 文件中引入 jQuery 库,可以通过以下方式添加: ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 3. 创建一个 JavaScript 函数来调用百度翻译 API。下面是一个简单的示例: ```javascript function translateText(text) { var apiKey = 'YOUR_API_KEY'; var apiUrl = 'https://fanyi-api.baidu.com/api/trans/vip/translate'; $.ajax({ url: apiUrl, type: 'get', dataType: 'jsonp', data: { q: text, appid: 'YOUR_APP_ID', salt: new Date().getTime(), from: 'auto', to: 'en', sign: md5('YOUR_APP_ID' + text + new Date().getTime() + 'YOUR_API_KEY') }, success: function(response) { var translatedText = response.trans_result[0].dst; console.log(translatedText); }, error: function(xhr, status, error) { console.log(error); } }); } ``` 请确保替换 `YOUR_API_KEY` 和 `YOUR_APP_ID` 为你在百度开发者平台上创建的应用的 API 密钥和应用ID。 4. 在你的页面中调用这个函数,例如: ```javascript translateText('你好'); ``` 这将翻译 "你好" 成英文,并将结果打印到控制台。 请注意,这只是一个简单的示例,你可以根据自己的需求进行修改和扩展。同时,为了保护你的 API 密钥,你可能需要在后端进行翻译请求,而不是直接在前端调用 API

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值