Question

在我的wordpress插件中我的WP_Widget类的widget函数中，我有一个名为$ hello的php数组变量。我想将此变量传递给javascript。我见过函数wp_localize_script并尝试使用它。但它不是在函数内部工作。如何使它工作？

这是我的WP_Widget类的widget（）函数中的代码。

wp_register_script('color-script', plugin_dir_url(__FILE__).'scripts/custom.js');
wp_enqueue_script('color-script');
$data = array("text_color" => $instance['text-color'], "bg_color" => $instance['bg-color'], "button_color" => $instance['button-color']);
wp_localize_script('color-script', 'php_data', $data);

这是custom.js中的javascript。

document.getElementById("wid-small-div").style.color = php_data.text_color;
document.getElementById("wid-small-div").style.background = php_data.bg_color;

Answer 1

这不是那么简单。 PHP是一种服务器端语言，这意味着服务器接收请求，呈现页面然后将其发送到浏览器。 Javascript是一种客户端语言（至少在您的情况下），这意味着它在从服务器接收呈现的页面后由客户端上的浏览器应用。

你不能只是将PHP变量传递给Javascript，因为浏览器无法访问它们，并且在JS进入游戏之前PHP已经完成执行。

为了做到这一点，你需要一个AJAX请求或类似的东西，这是一个由Javascript生成的服务器（即PHP函数）的异步调用，允许你在服务器和客户端之间传递数据（通常是JSON）无需重新加载页面。 jQuery非常robust built in AJAX support，这使得这很容易。

在您的情况下，您只需要使用jQuery向返回$hello数组的服务器上的PHP函数发送请求，以便您可以在JS中使用它。您可以使用wp_localize_script()来实现这一点，例如在PHP和JS之间传递变量等简单情况，但我们无法在不查看代码的情况下对代码进行故障排除。

Answer 2

您需要做的就是将$hello变量的内容打印为JS变量：

# WP_Widget::widget()
echo '<script>var hello = ' . json_encode($hello) . ';</script>';

然后，一旦呈现窗口小部件，您将在JS中拥有hello变量。

Answer 3

是的，您可以将PHP变量传递给javascript，但是您无法将变量从Javascript传递给PHP。 PHP是在服务器端处理的，所以当浏览器上显示页面时，所有PHP都已经处理完毕，Javascript将开始工作。

你可以这样试试：

var hello = '<?php echo $hello ?>';

将php变量传递给Wordpress WP_Widget类中的javascript

3 个答案: