使用jQuery更改PHP变量内容而无需刷新

Question

我有一个多语言的网站-英语和德语。

我有一个文件content.php ，其中存储了我的英语和德语内容。

这是一个例子：

  $content_en = array(
    'title'       => 'title',
    'type'        => 'photography',
  );

  $content_de = array(
    'title'       => 'titel',
    'type'        => 'fotografie',
  );

在我的index.php我得到的值是这样的：

  // Checking for browser default language
  $lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);

  // Storing browser default language in variable – either `$content_en` or `content_de`
  $content_lang = ${ 'content' . '_' . $lang };

  // Output title in browser default’s language
  echo $content_lang['title'];

但我也想在我的网站上安装语言切换器，以防浏览器的默认语言不正确：

<button class="lang-en">EN</button>
<button class="lang-de">DE</button>

现在，我想根据在en或de单击哪个按钮来更改变量$lang 。 重要的部分是：我喜欢在不刷新页面的情况下更改值。

我知道以下代码无法像这样工作，但是从字面上描述了我想要实现的目标：

  $(' .lang-en' ).click( function( e ) {
    e.preventDefault();
    $lang = 'en';
  });
  $(' .lang-de' ).click( function( e ) {
    e.preventDefault();
    $lang = 'de';
  });

我不确定是否有可能（例如使用ajax），但是也许有人可以解决我的问题。

非常感谢！

Answer 1

PHP是服务器端代码，仅在页面加载时运行-一旦运行，它的变量就被遗忘和报废了，是的，您现在可能认为它不可能……好吧，不。

AJAX使用请求来执行脚本，但是在使用响应方面有出色的发明。 我们可以稍后将其偶像化，但是现在，让我们专注于您的目标。

$('#lang-de').click(function() {
    $.post('index.php' { lang: de })
       .done(function(data) {
       });
});

在Index PHP文件中，可以有一个POST控制器来确定页面的语言，该语言也可以作为会话捕获，即：

if(isset($_POST['lang']) || isset($_SESSION['lang'])):
    // Code to change language
   // Update the Session language
endif;

我们可以使用该会话，因此一旦选择了语言，就不需要在每个页面上不断张贴文字，就知道要使用哪种语言。

关于AJAX的事情是，响应是通过页面输出收集的，因此，您只需使用以下命令即可：

<div id="page-container">

然后在.done函数中使用它：

$('#page-container').html = data;

然后，这会将所有新语言和页面加载到当前语言和页面中。

Answer 2

您可以通过ajax请求php页面。

var content;
 $.ajax({
    url: "yourServerUrl/getLang.php?lan=en", 
    success: function(result){
            content = result;
        }
  });

现在，此内容必须具有您的getLang.php返回的对象

getLang.php可以如下。

<?php

  $content_en = array(
    'title'       => 'title',
    'type'        => 'photography',
  );

  $content_de = array(
    'title'       => 'titel',
    'type'        => 'fotografie',
  );

if($_GET["lan"]=="en"){
echo json_encode($content_en);
}
else{
echo json_encode($content_de);
}

因此，现在单击按钮，您可以将php称为

$(' .lang-en' ).click( function( e ) {
    e.preventDefault();
$.ajax({
    url: "yourServerUrl/getLang.php?lan=en", 
    success: function(result){
            content = result;
        }
  });
    $lang = 'en';
  });


  $(' .lang-de' ).click( function( e ) {
    e.preventDefault();
$.ajax({
    url: "yourServerUrl/getLang.php?lan=de", 
    success: function(result){
            content = result;
        }
  });
    $lang = 'de';
  });

现在，假设您将有2个标签，分别在页面上显示<h1 id="title"></h1>和<h2 id="type"></h2>以显示文本。

因此，您的ajax调用应如下所示进行修改。

$.ajax({
    url: "yourServerUrl/getLang.php?lan=en", 
    success: function(result){
            content = result;
            $("#title").text(content.title);
            $("#type").text(content.type);

        }
  });

这将自动使您的文本正确定位并根据需要使用正确的语言。