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. OpenCV使用CMake和MinGW的编译安装

    官方教程:https://wiki.qt.io/How_to_setup_Qt_and_openCV_on_Windows 软件环境: Qt:5.11 CMake-3.14.4 OpenCV-4.1. ...

  2. git cherry-pick 命令，解决冲突后没有 commit 变更，再次pull 时出错

    Git : You have not concluded your cherry-pick (CHERRY_PICK_HEAD exists). 解决方法:(1)使用git status 命令查看当前 ...

  3. [转帖]springboot2.0配置连接池（hikari、druid）

    springboot2.0配置连接池(hikari.druid) 原文链接:https://www.cnblogs.com/blog5277/p/10660689.html 原文作者:博客园--曲高终 ...

  4. 最近C#项目中不小心踩的低级坑

    都是很基础的错误问题,大部分都是因为不查一下资料就直接根据其它类似语言的经验写代码导致的 1. 一个企业微信上的正常的界面突然不能滚动了 本以为是浏览器代码计算问题,结果发现是JS出错导致. 2. R ...

  5. java实现二维码的生成和解读

    Java利用QRCode.jar包实现二维码编码与解码   QRcode是日本人94年开发出来的.首先去QRCode的官网http://swetake.com/qrcode/java/qr_java. ...

  6. log4net自动删除日志文件

    晚上关于删除的日志文件主要有 https://blog.csdn.net/hellolib/article/details/78316253, 其实我这里的实现方式和他差不多,不过我这里不用配置时间, ...

  7. java学习：循环结构的使用规则和注意事项

    循环结构的基本组成部分,一般可分为四部分: 初始化语句:在循环开始最初执行,而且只做唯一一次 条件判断:如果成立,则循环继续:如果不成立,则循环退出. 循环体:重复要做的事情内容,若干行语句. 进步语 ...

  8. 【在 Nervos CKB 上做开发】Nervos CKB 脚本编程简介[4]：在 CKB 上实现 WebAssembly

    作者:Xuejie 原文链接:https://xuejie.space/2019_10_09_introduction_to_ckb_script_programming_wasm_on_ckb/ N ...

  9. Marshmallow详解

    目录 Marshmallow详解 1. Scheme 2. Serializing(序列化) 3. 过滤输出 4. Deserializing(反序列化) 5. 处理多个对象的集合 6. Valida ...

  10. ASP.NET Core 静态文件

    静态文件(HTML,CSS,图片和Javascript之类的资源)会被ASP.NET Core应用直接提供给客户端. 静态文件通常位于网站根目录(web root) <content-root& ...