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：请参阅jQuery get了解$ .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';

翻译整个页面而不刷新它

3 个答案: