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. C++ getline()的两种用法

    getline():用于读入一整行的数据.在C++中,有两种getline函数.第一种定义在头文件<istream>中,是istream类的成员函数:第二种定义在头文件<string ...

  2. [转帖]/var/log/wtmp文件的作用

    /var/log/wtmp文件的作用 https://blog.51cto.com/oldyunwei/1658778   /var/log/wtmp是一个二进制文件,记录每个用户的登录次数和持续时间 ...

  3. java什么是构造方法

    构造方法 一.构造方法的特点 (1)每当创建给定类的实例时就调用的方法 (2)与类同名,但没有返回类型 (3)Java 为对象分配内存,初始化实例变量并调用构造方法 (4)两种构造方法 1.参数化构造 ...

  4. 一文搞懂 Flink 网络流控与反压机制

    https://www.jianshu.com/p/2779e73abcb8 看完本文,你能get到以下知识 Flink 流处理为什么需要网络流控? Flink V1.5 版之前网络流控介绍 Flin ...

  5. 用Java访问带有Kerberos认证的HBase

    程序代码实例如下:    package com.hbasedemo; import java.io.IOException; import org.apache.hadoop.conf.Config ...

  6. Java可视化计算器

    利用java中的AWT和SWING包来做可视化界面. 首先来简单了解一下这两个包: AWT和Swing都是Java中用来做可视化界面的.AWT(Abstract Window Toolkit):抽象窗 ...

  7. LINUX 下.NET Core 微服务部署实战

    前言 最近一直在开发部署.也没有总结一下.从5月份开始出差到现在基本没有发过博客,哎,惭愧. 一直在弄微服务,后续会慢慢更新下面这个系列.欢迎各位大佬交流指点. 分布式理论专题 1..net core ...

  8. EF之DataBase添加新字段

    数据库中表添加新字段后,在EF的xml格式的中找到与表名相同的节点添加新字段 (SSDL.CSDL和C-S都要添加相关信息)

  9. Google Chrome 浏览器JS无法更新解决办法

    JS无法更新原因: 浏览器为了加载快,默认是按照自定规则更新缓存,非实时更新. 我们在开发的时候,JS变动很快,需要即时让浏览器加载最新文件,也就是禁用浏览器缓存 (1)使用F12进入开发者模式,找到 ...

  10. C#视频拍照、视频录制项目示例

    1.AForge 2.WPFMediaKit 3.ffmpeg