翻譯整個頁面而不刷新

Question

我目前正在使用的網站是用兩種語言（fr / en）編寫的。 我用來翻譯頁面的方法非常簡單：

的HTML

<ul id="switch">
    <li><a href="index.php?lang=en" title="English version">En</a></li>
    <li><a href="index.php?lang=fr" title="Version française">Fr</a></li>
</ul>

PHP（index.php）

<?php      
    // Translation
    if(isset($_GET['lang'])) {
        $lang = $_GET['lang'];
    }
    else {
        $lang = 'en';
    }

    switch($lang) {
        case 'en':
            $content = 'en.php';
            break;

        case 'fr':
            $content = 'fr.php';
            break;
    }

    include_once('lang/'.$content);
?>

en.php和fr.php都包含一個數組，該數組以各自的語言填充頁面的實際內容。

en.php（示例）

<?php
    $version = array(
        'mainTitle' => 'Main title test',
        'noscript' => 'Noscript message test',
        'header' => 'Header test'
        // And so on, same thing for the french version
    );
?>

該系統可以正常工作，並且足以滿足該網站的需求，但是當用戶從一種語言切換到另一種語言時，這意味着頁面刷新 ，而這正是我想要避免的 。

我想我可以使用一些AJAX（jQuery）來解決這個問題，但是我不確定如何做到這一點。 您能給我一些如何實現這一點的提示嗎？ 考慮到這是一個小規模的項目，我也願意就其他可能的方法提出建議。

謝謝你的幫助。

Answer 1

我建議以下內容：將特定於語言的內容保留在Javascript字典中；使用Javascript方法填充該字典中的數據；進行PHP服務器調用，以返回該字典的內容（基本上是特定於語言的內容）；切換到另一種語言，進行PHP服務器調用以填充Javascript字典，並調用Javascript方法進行填充。

大概是這樣的

function js_populate_content(lang)  {
    var content-data = $.get(lang); // Ajax call to your PHP service. You will need to do some parsing here (JSON would be easiest)
    // Populate your HTML elements using data
    document.getElementById('header').innerHTML = content-data['header'];
}

您可以在頁面加載時調用此方法，也可以在第一次加載時從php加載它

$(document).ready(function(){
    var default_lang = 'en';
    js_populate_content(default_lang);
}

每當用戶更改語言時，都應調用此方法，例如

$('a#language').on('click', function() {
    var new_lang = $('input#language').val();
    js_populate_content(new_lang);
}

注意：您應該包含jquery

注意2：有關$ .GET的正確語法，請參見jQuery get 。

然而，這對於僅語言切換而言不必要地復雜。 同樣，您可以使用AJAX加載整個頁面，然后根據語言將正文設置為新加載的頁面。 取決於哪個更易於您作為服務調用提供（僅提供語言詞典，而不是提供特定語言的整個頁面）。有關后者，請參見jQuery load

Answer 2

假設頁面上的所有內容均已翻譯，則可以執行以下操作。

$('#switch a').on('click', function(e){
    e.preventDefault(); // to stop the link from following the url
    var href = $(this).attr('href');
    $('body').load( href );
});

如果body的一部分，例如包含所有已翻譯位的div ，則可以將其更改為

$('#translated_content_id').load( href );

Answer 3

如果您不想刷新頁面（向PHP頁面發出新請求），建議您在Javascript中使用字符串文件。 這可能需要一些重復的編碼，但是效果很好。

Page.html：

<a href="#" onClick="setEnglish();">English</a> | <a href="#" onClick="setFrench();">Fran&ccedil;ais</a><br>

<span id="stringUsername"></span><br>
<input ...><br>
<span id="stringPassword"></span><br>
<input ...><br>
<span id="stringSex"></span>: <input ...><span id="stringMale"></span><input ...><span id="stringFemale"></span>

<script src="langEng.js"></script>
<script src="langFra.js"></script>
<script>
function setEnglish();
document.getElementById('stringUsername').innerHTML = $stringUsername;
document.getElementById('stringPassword').innerHTML = $stringPassword;
document.getElementById('stringSex').innerHTML = $stringSex;
document.getElementById('stringMale').innerHTML = $stringMale;
document.getElementById('stringFemale').innerHTML = $stringFemale;
</script>

langEng.js

$stringUsername='Username';
$stringPassword='Password';
$stringSex='Sex';
$stringMale='Male';
$stringFemale='Female';

langFra.js

$stringUsername='Username'; // Not sure about this translation.
$stringPassword='Mot de passe';
$stringSex='Sexe';
$stringMale='Homme';
$stringFemale='Femme';