HTML实现调用百度在线翻译API

本文介绍了如何利用HTML结合jQuery和Ajax技术,实现调用百度在线翻译API,为网页提供实时翻译功能。通过实例代码,展示了从发送请求到接收并显示翻译结果的完整流程。
摘要由CSDN通过智能技术生成

最近在帮忙写网站,等有时间之后再仔细的研究后台。

<!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() ;
aler
  • 1
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 JavaScript 中调用百度翻译 API,可以按照以下步骤进行操作: 1. 在百度开发者平台上创建一个账号,并创建一个翻译应用,获取 API 密钥。 2. 在你的 HTML 文件中引入 jQuery 库,可以通过以下方式添加: ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 3. 创建一个 JavaScript 函数来调用百度翻译 API。下面是一个简单的示例: ```javascript function translateText(text) { var apiKey = 'YOUR_API_KEY'; var apiUrl = 'https://fanyi-api.baidu.com/api/trans/vip/translate'; $.ajax({ url: apiUrl, type: 'get', dataType: 'jsonp', data: { q: text, appid: 'YOUR_APP_ID', salt: new Date().getTime(), from: 'auto', to: 'en', sign: md5('YOUR_APP_ID' + text + new Date().getTime() + 'YOUR_API_KEY') }, success: function(response) { var translatedText = response.trans_result[0].dst; console.log(translatedText); }, error: function(xhr, status, error) { console.log(error); } }); } ``` 请确保替换 `YOUR_API_KEY` 和 `YOUR_APP_ID` 为你在百度开发者平台上创建的应用的 API 密钥和应用ID。 4. 在你的页面中调用这个函数,例如: ```javascript translateText('你好'); ``` 这将翻译 "你好" 成英文,并将结果打印到控制台。 请注意,这只是一个简单的示例,你可以根据自己的需求进行修改和扩展。同时,为了保护你的 API 密钥,你可能需要在后端进行翻译请求,而不是直接在前端调用 API
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值