外贸网站建设,外贸网站建设公司,跨境电商独立站

首先是不翻译的代码，直接获取API数据并在HTML中显示：

<script type="text/javascript" charset="utf-8">
 const apiUrl = 'API接口地址';
const container = document.getElementById('asklist');

fetch(apiUrl, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({}) 
})
.then(response => {
    if (!response.ok) {
        throw new Error(`HTTP 错误！状态码: ${response.status}`);
    }
    return response.json(); 
})
.then(res => {
    const categories = res.data; 
    if (!Array.isArray(categories)) {
        console.error('API 返回的 data 不是一个有效的数组');
        return;
    }
    container.innerHTML = '';
    categories.forEach(category => {
        const faqList = category.contents;
        if (Array.isArray(faqList)) {
            faqList.forEach(item => {
                const title = item.标题字段|| '无标题';
                const content = item.内容字段 || '无内容';
                const htmlItem = `
                    <div class="col-md-12 mb-4">
                        <div class="asklist fs-14 fs-sm-16">
                            <div class="title">
                                <img src="/static/images/Q.png" alt="">${title}
                            </div>
                            <div class="desc">
                                <img src="/static/images/A.png" alt="">${content}
                            </div>
                        </div>     
                    </div>
                `;
                container.insertAdjacentHTML('beforeend', htmlItem);
            });
            
        }
    });
})
.catch(error => {
    console.error('获取 FAQ 列表失败:', error);
    container.innerHTML = '<div class="col-md-12 text-center text-danger">数据加载失败，请稍后再试。</div>';
});
</script>

以下是获取到接口数据并翻译成英文演示DEMO:

<script type="text/javascript" charset="utf-8">
// 使用 DOMContentLoaded 确保网页的 HTML 结构完全加载后再执行 JS
window.addEventListener('DOMContentLoaded', () => {

    const apiUrl = 'API接口地址';
    const container = document.getElementById('asklist');

    // 如果页面上根本没有 asklist 容器，直接停止执行，防止后续报错
    if (!container) {
        console.error('未在页面上找到 id 为 "asklist" 的元素，请检查 HTML 结构！');
        return;
    }

    // 1. 封装谷歌免 Key 翻译函数
    async function translateText(text) {
        if (!text || text === '无标题' || text === '无内容' || text.trim() === '') {
            return text;
        }
        try {
            const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=zh-CN&tl=en&dt=t&q=${encodeURIComponent(text)}`;
            const response = await fetch(url);
            
            if (!response.ok) throw new Error('翻译接口响应异常');
            
            const res = await response.json();
            if (res && res[0]) {
                return res[0].map(item => item[0]).join('');
            }
            return text;
        } catch (err) {
            console.error('谷歌翻译失败:', err);
            return text; 
        }
    }

    // 2. 主逻辑函数
    async function loadAndTranslateFaq() {
        try {
            // 在加载期间显示一个提示，提升用户体验
            container.innerHTML = '<div class="col-md-12 text-center text-muted">Loading and translating...</div>';

            const response = await fetch(apiUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({}) 
            });

            if (!response.ok) {
                throw new Error(`HTTP 错误！状态码: ${response.status}`);
            }

            const res = await response.json();
            const categories = res.data; 

            if (!Array.isArray(categories)) {
                console.error('API 返回的 data 不是一个有效的数组');
                container.innerHTML = '';
                return;
            }

            // 扁平化数据
            const allItems = [];
            categories.forEach(category => {
                if (Array.isArray(category.contents)) {
                    category.contents.forEach(item => {
                        allItems.push({
                            question: item.标题字段 || '无标题',
                            answer: item.内容字段 || '无内容'
                        });
                    });
                }
            });

            // 并发翻译
            const translatePromises = allItems.map(async (item) => {
                const [translatedTitle, translatedContent] = await Promise.all([
                    translateText(item.question),
                    translateText(item.answer)
                ]);
                
                return `
                    <div class="col-md-12 mb-4">
                        <div class="asklist fs-14 fs-sm-16">
                            <div class="title">
                                <img src="/static/images/Q.png" alt="">${translatedTitle}
                            </div>
                            <div class="desc">
                                <img src="/static/images/A.png" alt="">${translatedContent}
                            </div>
                        </div>     
                    </div>
                `;
            });

            const htmlItemsArray = await Promise.all(translatePromises);
            
            // 翻译完成后，一次性写入页面
            container.innerHTML = htmlItemsArray.join('');

        } catch (error) {
            console.error('获取或翻译 FAQ 列表失败:', error);
            container.innerHTML = '<div class="col-md-12 text-center text-danger">数据加载或翻译失败，请稍后再试。</div>';
        }
    }

    // 3. 执行初始化
    loadAndTranslateFaq();
});
</script>