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

最新推荐文章于 2024-02-02 10:49:20 发布

转载最新推荐文章于 2024-02-02 10:49:20 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sky20080101/p/6803124.html

文章标签：

#json #javascript #数据结构与算法 #ViewUI

本文介绍了一种使用HTML和jQuery实现调用百度在线翻译API的方法。通过一个简单的按钮点击事件，可以将中文文本框中的内容翻译成英文并显示在另一个文本框中。此示例展示了如何设置必要的HTTP请求参数并解析返回的JSON数据。

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

本文章已收录于：

<!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>

<!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