Microsoft Azure Translator使用类似于Google Translator的HTML页面

isr3a4wc 于 2023-10-22 发布在 Go

关注(0)|答案(1)|浏览(91)

如何使用Microsoft Azure Translator，如Google Translator for html页面？
我有Microsoft Azure Translator的API密钥。
下面是示例屏幕截图：

来源：https://stackoverflow.com/questions/77321628/microsoft-azure-translator-using-like-google-translator-dropdown-for-html-page

1条答案

按热度按时间

rekjcdws1#

如何将Microsoft Azure Translator（如Google Translator）用于HTML页面？
您可以使用下面的HTML代码使用Microsoft Translator将文本从一种语言翻译为另一种语言。

验证码：

<!DOCTYPE html>
    <html>
    <head>
        <title>Microsoft Text Translator</title>
        <!-- Include jQuery library -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
    <body>
        <h1>Microsoft Text Translator</h1>
        <p>Translate text from one language to another:</p>
        <label for="fromLang">From Language:</label>
        <select id="fromLang">
            <option value="en">English</option>
            <option value="es">Spanish</option>
            <option value="fr">French</option>
            <!-- Add more language options as needed -->
        </select>
        <br>
        <label for="toLang">To Language:</label>
        <select id="toLang">
            <option value="es">Spanish</option>
            <option value="en">English</option>
            <option value="fr">French</option>
            <!-- Add more language options as needed -->
        </select>
        <br>
        <label for="text">Text to Translate:</label>
        <textarea id="text" rows="1" cols="30" placeholder="Enter text to translate"></textarea>
        <br>
        <button id="translateBtn">Translate</button>
        <br>
        <label for="output">Translation:</label>
        <textarea id="output" rows="1" cols="30" readonly></textarea>
    
        <script>
            $(document).ready(function () {
                $("#translateBtn").click(function () {
                    var fromLang = $("#fromLang").val();
                    var toLang = $("#toLang").val();
                    var text = $("#text").val();
                    var apiKey = "xxxxx";
                    var url = "https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&from=" + fromLang + "&to=" + toLang;
                    var location = "xxxxx";
    
                    $.ajax({
                        url: url,
                        type: "POST",
                        beforeSend: function (xhrObj) {
                            xhrObj.setRequestHeader("Content-Type", "application/json");
                            xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", apiKey);
                            xhrObj.setRequestHeader("Ocp-Apim-Subscription-Region", location);
                        },
                        data: JSON.stringify([{ Text: text }]),
                        success: function (data) {
                            $("#output").val(data[0].translations[0].text);
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert("Error: " + errorThrown);
                        }
                    });
                });
            });
        </script>
    </body>
    </html>

在上面，您需要Microsoft Azure Translator的**API Key and location**。

输出：

参考：

翻译器-翻译- REST API（Azure认知服务）|微软学习

赞(0）回复(0）举报 2023-10-22

我来回答

Microsoft Azure Translator使用类似于Google Translator的HTML页面

1条答案

相关问题

热门标签

最新问答