Php 翻译整个页面而不刷新它

我目前工作的网站是用两种语言编写的（fr/en）。我用来翻译页面的方法非常简单：

HTML

该系统运行良好，对于本网站来说已经足够了，但当用户从一种语言切换到另一种语言时，它意味着页面刷新，这正是我想要避免的

我想我可以用一点AJAX（jQuery）来解决这个问题，但我不确定该怎么做。你能给我一些关于如何实现这一点的提示吗？我也愿意接受其他可能的方法的建议——记住这是一个小规模的项目

---

谢谢您的帮助。

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

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

如果

正文

中有一部分，比如说

div

包含所有已翻译位，则可以将其更改为

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

---

我建议如下，将特定于语言的内容保存在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的正确语法，请参阅

---

然而，这对于语言转换来说是不必要的复杂。类似地，您可以使用AJAX加载整个页面，并根据语言将正文设置为新加载的页面。取决于哪一个更容易作为服务调用提供（仅提供语言词典，而不是以特定语言提供整个页面），对于后者，请参见

如果您不想刷新页面（向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>

langFra.js

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

---

答案部分取决于不刷新的原因。若在页面更改时存在用户交互更改，则解决方案更为复杂。如果没有，可以进行一个简单的ajax调用并重新加载新内容否，这是一个非常简单的页面，实际上没有用户交互更改。或者，再想想，您可以在php中加载这两种语言，并根据语言显示/隐藏。因此，每个项目将有两次，但其中一个项目将始终隐藏。（您可以使用类名，只需说$（'.english'）.toggle（）；感谢您的有用见解，我将对此进行研究。我实际上想到了第二个选项，但我不知道如何正确实现这一点。

$.get

是小写的，可以使用

load（）

为了使它更简单，Hanks Charlie编辑了get to lowercase。是的，您可以看到我将load作为第二个选项。从我提到的jQuery get页面，$.get（'ajax/languages.php'，function（data）{console.log（data）复制（稍作修改）；//这会将服务器响应打印到控制台//假设您的数据是JSON格式的，您可以简单地解析它，例如var header=data.header；}）；

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

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

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

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