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. python入门之模块

    序什么是包包的作用一.什么是模块二.模块的三种来源三.模块的四种表现形式四.为什么要使用模块五. 如何创建,编写模块,并使用模块5.1 给模块起别名5.2 模块的导入方式5.3 循环导入问题 TOC ...

  2. 算法：array1和array2地址值相同，都指向堆空间的唯一的一个数组实体（不是数组的复制）

    package com.atguigu; public class fuzhi { public static void main(String[] args) { int[] array1=new ...

  3. Mysql系列（六）—— MySQL索引介绍

    前言 索引种类 索引维护 如何使用索引 一.索引索引种类 MySQL中索引主要包含以下几种: 普通索引 唯一索引 主键索引 联合索引 全文索引 二.索引维护 在简述了索引的类型后,再来了解下如何维护索 ...

  4. Redis常用配置和命令总结

    Redis(全称:Remote Dictionary Server 远程字典服务)是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言 ...

  5. 经实验验证，修正对using namespace std的认识

    备注①:name:符号.指的实体包括:变量.函数.类 备注②:认为全局命名空间也是一个包,在此称作 ROOT:: 或 global:: (这样就有了两个特别的包:一个是全局包,一个是std包.但对于编 ...

  6. loj#10078. 新年好(最短路)

    题目: loj#10078. 新年好 解析: 亲戚只有五个,可以把它们看成2,3,4,5,6号点,分别跑最短路,记录一下距离,然后DFS一下 这题非常玄学,我开了一个\(12*12\)的数组,没有离散 ...

  7. 正则-RegExp

    正则-RegExp 正则,是一条规则,用于检验字符串格式,目标就是字符串: 只要是表单提交的数据都是字符串 定义: 1,var reg=/格式/ 2,var reg=new regexp() 方法: ...

  8. MySQL常用sql语句大全

    创建数据库 1 create database dbname; 删除数据库 1 drop database dbname; 选择数据库 1 use dbname; 创建表 12345678 CREAT ...

  9. 《微信小程序项目开发实战：用WePY、mpvue、Taro打造高效的小程序》（笔记1）WePY开发环境的安装

    WePY的安装或更新都通过npm进行,全局安装或更新WePY命令行工具,使用以下命令: npm install wepy-cli -g 稍等片刻,成功安装后,即可创建WePY项目. 注意:如果npm安 ...

  10. Workerman启动与停止相关命令

    start.php为入口文件 一.启动 1.以debug(调试)方式启动 php start.php start 2.以daemon(守护进程)方式启动 php start.php start -d ...