根据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>
