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>
 

 

posted @ 2017-05-03 17:51  sky20080101  阅读(1549)  评论(1)  编辑  收藏  举报