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

HTML实现调用百度在线翻译API的更多相关文章

  1. C++调用有道翻译API实现在线翻译之发声篇

    大概半月前写了一篇博文:C++中使用Curl和JsonCpp调用有道翻译API实现在线翻译, 得到大家的热情捧场,有人看了文章说要是能发声不是更好,我觉得说的也是哈,能听到专家的标准发音,那该是多美的 ...

  2. C#调百度通用翻译API翻译HALCON的示例描述

    目录 准备工作 参数简介 输入参数 输出参数 使用HttpClient 翻译工具类 应用:翻译HALCON的示例描述 准备工作 HALCON示例程序的描述部分一直是英文的,看起来很不方便.我决定汉化一 ...

  3. QT调用百度语音REST API实现语音合成

    QT调用百度语音REST API实现语音合成 1.首先点击点击链接http://yuyin.baidu.com/docs/tts 点击access_token,获取access_token,里面有详细 ...

  4. C++中使用Curl和JsonCpp调用有道翻译API实现在线翻译

    使用C++开发一个在线翻译工具,这个想法在我大脑中过了好几遍了,所以就搜了下资料,得知网络上有很多翻译API,这里我选择我平时使用较多的有道翻译API进行在线翻译工具开发的练习.翻译API返回的结果常 ...

  5. 基于百度通用翻译API的一个翻译小工具

    前几天写了一个简单的翻译小工具,是基于有道翻译的,不过那个翻译接口有访问限制,超过一定次数后会提示访问过于频繁,偶然发现百度翻译API如果月翻译字符少于200万是不收取费用的,所以就注册了一个百度开发 ...

  6. 苹果手机 微信调用百度地图Javascript API 频繁闪退问题

    最近在网页中调用百度地图API js大众版,但是在IOS8系统中,缩放的时候频繁闪退,安卓手机没有这个问题! 在网上查询了下,有网友回答说不要频繁的去new marker,而是初始化话一定量的mark ...

  7. python调用有道翻译api实现翻译

    通过调用有道翻译的api,实现中译英.其他语言译中文 代码: # coding=utf-8 import urllib import urllib2 import json import time i ...

  8. 跨域解决方案之JSONP，通过借助调用百度搜索的API了解跨域案例

    跨域解决方案之JSONP 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web ...

  9. PHP调用百度天气接口API

    //百度天气接口API $location = "北京"; //地区 $ak = "5slgyqGDENN7Sy7pw29IUvrZ"; //秘钥,需要申请,百 ...

随机推荐

  1. Arcmap图层浏览遇到ORA-07445 [QCDLAUCN] 错误

    Oracle 12.1.0.2版本,在图层浏览时遇到了ORA-07445 [QCDLAUCN] 错误.根据MOS的查询结果,得知这是一个bug (Doc ID 1932725.1): 文章中同时给出了 ...

  2. mknod命令的使用

    1.mknod命令 在Linux系统下,mknod命令可用于系统下字符设备文件和块设备文件的创建. (1)命令语法 mknod(选项)(参数) (2)常用选项说明 -Z:设置安全的上下文. -m:设置 ...

  3. Lab_1：练习4——分析bootloader加载ELF格式的OS的过程

    一.实验内容 通过阅读bootmain.c,了解bootloader如何加载ELF文件.通过分析源代码和通过qemu来运行并调试bootloader&OS, bootloader如何读取硬盘扇 ...

  4. windows下elasticsearch安装ik分词器后无法启动

    windows下elasticsearch安装ik分词器后启动报如下图错误: 然后百度说是elasticsearch路径有空格,一看果然我的路径有空格,然后重新换个路径就好了.

  5. 入门-windows下安装ETH挖矿

    对刚入门的区块链开发者来说,刚开始可以在windows本地搭建私有链,便于操作,毕竟,要想真正挖到币还是有难度的,下面以ETH为例,在windows环境下安装并实现挖矿. 步骤一.安装geth环境.下 ...

  6. 订单BOM与销售BOM的区别

    訂單BOM: 是實際生產時用的BOM, 在標準BOM和銷售BOM基礎上增減物料的BOM 銷售BOM: 是為特定客戶設定的BOM, 在主檔數據層次上的BOM, 在生產時是帶到訂單BOM中去的. 標準BO ...

  7. MVC+Ninject+三层架构+代码生成 -- 总结（一、數據庫）

    一.數據表 是參照 別人的庫建表的 ,主鍵都是用int 自增,若是跨數據庫的話,建議使用GUID為主鍵.

  8. Oracle For Linux 恢复日记 霆智X8III

    公司最近的客户需要在LINUX系统中做数据迁移,备份出来的内容数据库物理文件,回档日志和SpfileXXXX 客户用的是北京霆智的X8备份阵列,X8与数据库服务器都放在IDC机所,IDC机房与客户之间 ...

  9. B树索引最通俗易懂的介绍

    先来一段有莫的对话: 前几天下班回到家后正在处理一个白天没解决的bug,厕所突然传来对象的声音:   对象:xx,你有<时间简史>吗?  我:我去!妹子,你这啥癖好啊,我有时间也不会去捡屎 ...

  10. .net Dapper 实践系列(6) ---事务删除(Layui+Ajax+Dapper+MySQL)

    目录 写在前面 实现步骤 写在最后 写在前面 上一小节,总结了事务多表更新的两种方法.一个是只更新原来的数据,一个是先删除原来的数据再往里面添加新的数据.而这一小节,说的是事务的多表删除. 实现步骤 ...