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. Android中getprop命令的使用

    (1)getprop 在Android系统中,使用getprop命令可以从系统中读取一些设备信息,属性的文件例如: init.rc default.prop /system/build.prop 查询 ...

  2. 内网服务器离线编译安装mysql5.7并调优

    目录 内网服务器离线编译安装mysql5.7并调优 前言 关于MySQL 一.MySQL安装篇 部署环境 前期准备工具 挂载系统ISO镜像,配置yum源 二.MySQL调优篇 1.对MySQL进行安全 ...

  3. 责任链(ChainOfResponsibility)模式

    在责任链模式里,很多对象由每一个对象对其下家的引用而连接起来形成一条链.请求在这个链上传递,直到链上的某一个对象决定处理此请求.发出请求的客户端并不知道链上的哪一个对象,这使得系统可以在不影响客户端的 ...

  4. Sitecore 8.2 扩展体验分析报告

    本文简要介绍了如何为Experience Analytics创建自定义报告.在Sitecore术语中,我会说:创建新的报表维度和适当的报表以显示它们. 我们做的任务是:实现新的报告,显示不同网络浏览器 ...

  5. Luogu - P1018 乘积最大 - 题解

    原文:https://www.luogu.org/problemnew/solution/P1018?page=7 题目:P1018[乘积最大] 前言: 这题的正解理论上说是DP,可是由于民间数据太水 ...

  6. linux下僵尸进程的发现与处理

    一.概述 僵尸进程是怎么产生的 当子进程退出时,父进程没有调用wait函数或者waitpid()函数等待子进程结束,又没有显式忽略SIGCHLD信号,那么它将一直保持在僵尸状态,如果这时父进程结束了, ...

  7. django开发_七牛云CNAME解析

    CNAME 简介 CNAME 即指别名记录,也被称为规范名字.这种记录允你将多个名字映射到同一台计算机. 当需要将域名指向另一个域名,再由另一个域名提供 ip地址,就需要添加 CNAME 记录. 为什 ...

  8. 【题解】古代猪文 [SDOI2010] [BZOJ1951] [P2480]

    [题解]古代猪文 [SDOI2010] [BZOJ1951] [P2480] 在那山的那边海的那边有一群小肥猪.他们活泼又聪明,他们调皮又灵敏.他们自由自在生活在那绿色的大草坪,他们善良勇敢相互都关心 ...

  9. centos7安装mysql初始化报错

    [root@localhost bin]# ./mysqld --initialize --user=mysql2019-09-16T06:15:28.835202Z 0 [Warning] TIME ...

  10. K8S学习笔记之使用Fluent-bit将容器标准输入和输出的日志发送到Kafka

    0x00 概述 K8S内部署微服务后,对应的日志方案是不落地方案,即微服务的日志不挂在到本地数据卷,所有的微服务日志都采用标准输入和输出的方式(stdin/stdout/stderr)存放到管道内,容 ...