1

私が現在取り組んでいるウェブサイトは、2 つの言語 (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
    );
?>

このシステムは正常に機能し、この Web サイトには十分ですが、ユーザーがある言語から別の言語に切り替えるとページが更新されることを意味し、それはまさに私が避けたいことです .

少しの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の適切な構文については、jQuerygetを参照してください。

ただし、これは言語の切り替えだけでは不必要に複雑です。同様に、ページ全体をAJAXにロードし、言語に基づいてボディを新しくロードされたページに設定できます。サービス呼び出しとして提供するのが簡単な方によって異なります（言語辞書のみを提供するのか、特定の言語でページ全体を提供するのか）。後者については、jQueryの読み込みを参照してください。

于 2012-11-22T17:28:44.023 に答える
1

ページを更新したくない (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';
于 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、たとえば、div変換されたすべてのビットを含む a がある場合、それを次のように変更できます。

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