yy日韩无码,富婆的诱惑,国产菊爆视频在线观看,国产精品无码AV高清波波AV,国产成人啪精品视频站午夜,已满十八岁免费观看电视剧十八岁,中文字幕av久久人妻蜜桃臀

首先是不翻譯的代碼，直接獲取API數(shù)據(jù)并在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 錯(cuò)誤！狀態(tài)碼: ${response.status}`);
    }
    return response.json(); 
})
.then(res => {
    const categories = res.data; 
    if (!Array.isArray(categories)) {
        console.error('API 返回的 data 不是一個(gè)有效的數(shù)組');
        return;
    }
    container.innerHTML = '';
    categories.forEach(category => {
        const faqList = category.contents;
        if (Array.isArray(faqList)) {
            faqList.forEach(item => {
                const title = item.標(biāo)題字段|| '無標(biāo)題';
                const content = item.內(nèi)容字段 || '無內(nèi)容';
                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">數(shù)據(jù)加載失敗，請稍后再試。</div>';
});
</script>

以下是獲取到接口數(shù)據(jù)并翻譯成英文演示DEMO:

<script type="text/javascript" charset="utf-8">
// 使用 DOMContentLoaded 確保網(wǎng)頁的 HTML 結(jié)構(gòu)完全加載后再執(zhí)行 JS
window.addEventListener('DOMContentLoaded', () => {

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

    // 如果頁面上根本沒有 asklist 容器，直接停止執(zhí)行，防止后續(xù)報(bào)錯(cuò)
    if (!container) {
        console.error('未在頁面上找到 id 為 "asklist" 的元素，請檢查 HTML 結(jié)構(gòu)！');
        return;
    }

    // 1. 封裝谷歌免 Key 翻譯函數(shù)
    async function translateText(text) {
        if (!text || text === '無標(biāo)題' || text === '無內(nèi)容' || 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('翻譯接口響應(yīng)異常');
            
            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. 主邏輯函數(shù)
    async function loadAndTranslateFaq() {
        try {
            // 在加載期間顯示一個(gè)提示，提升用戶體驗(yàn)
            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 錯(cuò)誤！狀態(tài)碼: ${response.status}`);
            }

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

            if (!Array.isArray(categories)) {
                console.error('API 返回的 data 不是一個(gè)有效的數(shù)組');
                container.innerHTML = '';
                return;
            }

            // 扁平化數(shù)據(jù)
            const allItems = [];
            categories.forEach(category => {
                if (Array.isArray(category.contents)) {
                    category.contents.forEach(item => {
                        allItems.push({
                            question: item.標(biāo)題字段 || '無標(biāo)題',
                            answer: item.內(nèi)容字段 || '無內(nèi)容'
                        });
                    });
                }
            });

            // 并發(fā)翻譯
            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">數(shù)據(jù)加載或翻譯失敗，請稍后再試。</div>';
        }
    }

    // 3. 執(zhí)行初始化
    loadAndTranslateFaq();
});
</script>