HTML实现调用百度在线翻译API
本文章已收录于：
<!--
.embody{
padding:10px 10px 10px;
margin:0 -20px;
border-bottom:solid 1px #ededed;
}
.embody_b{
margin:0 ;
padding:10px 0;
}
.embody .embody_t,.embody .embody_c{
display: inline-block;
margin-right:10px;
}
.embody_t{
font-size: 12px;
color:#999;
}
.embody_c{
font-size: 12px;
}
.embody_c img,.embody_c em{
display: inline-block;
vertical-align: middle;
}
.embody_c img{
width:30px;
height:30px;
}
.embody_c em{
margin: 0 20px 0 10px;
color:#333;
font-style: normal;
}
-->
- <!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>
上一篇不要害怕重复
下一篇[c++]基于数组的二叉树遍历
