iou3344 2021-10-03 14:48 采纳率: 85.2%
浏览 69
已结题

如何一进入页面就自动通过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>
  • 写回答

2条回答 默认 最新

  • 广大菜鸟 2021-10-03 16:12
    关注

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

    img

    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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 10月11日
  • 已采纳回答 10月3日
  • 修改了问题 10月3日
  • 修改了问题 10月3日
  • 展开全部

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题