1

我目前正在开发的网站是用两种语言编写的（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) 来解决这个问题，但我不确定如何做到这一点。你能给我一些关于如何实现这一点的提示吗？我也愿意就其他可能的方式提出建议——记住这是一个小规模的项目。

谢谢你的帮助。

4

3 回答 3

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 加载

于 2012-11-22T17:28:44.023 回答
1

如果您不想刷新页面（向 PHP 页面发出新请求），我建议您在 Javascript 中使用字符串文件。这可能需要一些重复的编码，但效果很好。

页面.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';
于 2012-11-22T17:45:13.470 回答
0

假设页面上的所有内容都已翻译，您可能会这样做。 

$('#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，比如说 adiv包含所有翻译的位，您可以将其更改为

$('#translated_content_id').load( href );
于 2012-11-22T17:17:48.283 回答