如何一进入页面就自动通过ajax把指定div的内容翻译成英文，并直接替换原文本呢？
以下这段js是有效的，但是能不能改造成一进入页面就通过ajax自动将指定div（id="ajax"）的内容翻译成英文，并直接替换原文本呢？
PS：
1、appid和key都是有效的，方便你测试。
2、其中的md5，您需要从这里下载后的文件解压获得，以方便您本地测试哈。
感谢！
<!doctype html>
<head>
<meta charset="utf-8"/>
<style>
#ajax{
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;
text-align: justify;
height:200px;
background: #000;
margin:0 auto;
color:#fff;
}
</style>
</head>
<body>
<div>可打开浏览器控制台查看结果</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="./md5.js"></script>
<script type="text/javascript">
var appid = '20210930000960749';
var key = 'kGf34UMTwrHoXe6XOPZ3';
var salt = (new Date).getTime();
var query = 'apple';
// 多个query可以用\n连接 如 query='apple\norange\nbanana\npear'
var from = 'en';
var to = 'zh';
var str1 = appid + query + salt +key;
var sign = MD5(str1);
$.ajax({
url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
type: 'get',
dataType: 'jsonp',
data: {
q: query,
appid: appid,
salt: salt,
from: from,
to: to,
sign: sign
},
success: function (data) {
console.log(data);
}
});
</script>
<div id="ajax">如何一进入页面就通过ajax自动将本div（id="ajax"）的内容翻译成英文，并直接替换原文本呢？</div>
</body>
根据id获取
<!doctype html>
<head>
<meta charset="utf-8"/>
<title>test</title>
<style>
#ajax{
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;
text-align: justify;
height:200px;
background: #000;
margin:0 auto;
color:#fff;
}
</style>
</head>
<body>
<div>可打开浏览器控制台查看结果</div>
<div id="ajax">apple banana</div>
<!-- <div id="ajax">如何一进入页面就通过ajax自动将本div（id="ajax"）的内容翻译成英文，并直接替换原文本呢？</div> -->
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="./md5.js"></script>
<script type="text/javascript">
var appid = '20210930000960749';
var key = 'kGf34UMTwrHoXe6XOPZ3';
var salt = (new Date).getTime();
var query = document.getElementById("ajax").innerHTML;
// 多个query可以用\n连接 如 query='apple\norange\nbanana\npear'
var from = 'en';
var to = 'zh';
var reg = new RegExp("[\\u4E00-\\u9FFF]+","g");
if(reg.test(query)){//有中文
from = 'zh';
to = 'en';
}
var str1 = appid + query + salt +key;
var sign = MD5(str1);
$.ajax({
url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
type: 'get',
dataType: 'jsonp',
data: {
q: query,
appid: appid,
salt: salt,
from: from,
to: to,
sign: sign
},
success: function (data) {
console.log(data);
let info ="";
for ( var i = 0 ; i < data.trans_result.length ; i++ )
{
info += data.trans_result[i].dst;
}
document.getElementById("ajax").innerHTML = info;
}
});
</script>
</body>
Class方法
<!doctype html>
<head>
<meta charset="utf-8"/>
<title>test</title>
<style>
#ajax{
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;
text-align: justify;
height:200px;
background: #000;
margin:0 auto;
color:#fff;
}
</style>
</head>
<body>
<div>可打开浏览器控制台查看结果</div>
<div class="ajax">apple banana</div>
<!-- <div id="ajax">apple banana</div> -->
<!-- <div id="ajax">如何一进入页面就通过ajax自动将本div（id="ajax"）的内容翻译成英文，并直接替换原文本呢？</div> -->
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="./md5.js"></script>
<script type="text/javascript">
function getClass(className) //获得标签名为tagName,类名className的元素
{
if(document.getElementsByClassName) //支持这个函数
{
return document.getElementsByClassName(className);
}
else
{
var tags=document.getElementsByTagName("*");//获取标签
var tagArr=[];//用于返回类名为className的元素
for(var i=0;i < tags.length; i++)
{
if(tags[i].class == className)
{
tagArr[tagArr.length] = tags[i];//保存满足条件的元素
}
}
return tagArr;
}
}
</script>
<script type="text/javascript">
var appid = '20210930000960749';
var key = 'kGf34UMTwrHoXe6XOPZ3';
var salt = (new Date).getTime();
var tmpList = getClass("ajax");// only one item
var query = tmpList[0].innerText;
// 多个query可以用\n连接 如 query='apple\norange\nbanana\npear'
var from = 'en';
var to = 'zh';
var reg = new RegExp("[\\u4E00-\\u9FFF]+","g");
if(reg.test(query)){//有中文
from = 'zh';
to = 'en';
}
var str1 = appid + query + salt +key;
var sign = MD5(str1);
$.ajax({
url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
type: 'get',
dataType: 'jsonp',
data: {
q: query,
appid: appid,
salt: salt,
from: from,
to: to,
sign: sign
},
success: function (data) {
console.log(data);
let info ="";
for ( var i = 0 ; i < data.trans_result.length ; i++ )
{
info += data.trans_result[i].dst;
}
tmpList[0].innerText = info;
}
});
</script>
</body>
<!doctype html>
<head>
<meta charset="utf-8" />
<style>
#ajax {
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;
text-align: justify;
height: 200px;
background: #000;
margin: 0 auto;
color: #fff;
}
</style>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="md5.js"></script>
</head>
<body>
<div>可打开浏览器控制台查看结果</div>
<div id="ajax">如何一进入页面就通过ajax自动将本div（id="ajax"）的内容翻译成英文，并直接替换原文本呢？</div>
<script type="text/javascript">
//新增页面加载事件
$(document).ready(function () {
//do something
var appid = '20210930000960749';
var key = 'kGf34UMTwrHoXe6XOPZ3';
var salt = (new Date).getTime();
var query = 'apple';
// 多个query可以用\n连接 如 query='apple\norange\nbanana\npear'
var from = 'en';
var to = 'zh';
var str1 = appid + query + salt + key;
var sign = MD5(str1);
$.ajax({
url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
type: 'get',
dataType: 'jsonp',
data: {
q: query,
appid: appid,
salt: salt,
from: from,
to: to,
sign: sign
},
success: function (data) {
console.log(data);
//data 如果是翻译的结果
$("#ajax").html(data);//将结果显示到ID=AJAX种进行显示
}
});
});
</script>
</body>
我调用你那个阿里云的api出错，所以结果没有测试；
大体意思就是增加一个页面加载事件，当页面加载完执行你之前的代码，第二就是增加一个手动显示，将调用的结果显示到你的ajax div层上面。