在外部JS文件中包含PHP变量

Including PHP variables in an external JS file?

本文关键字：包含 PHP 变量 文件 外部 JS      更新时间：2023-09-26

我的web应用程序中有几行jQuery。这段代码目前是内联的，因为它接受了几个PHP变量。

<script type="text/javascript">
$(document).ready(function(){
    $('.post<?php echo $post->id; ?>').click(function() {
        $.ajax({
            type: 'POST',
            url: 'http://domain.com/ajax/add_love',
            data: { 
                post_id: <?php echo $post->id; ?>,
                user_id: <?php echo $active_user->id; ?>,
                <?php echo $token; ?>: '<?php echo $hash; ?>'
            },
            dataType: 'json',
            success: function(response) {
                $('.post<?php echo $post->id; ?>').html(response.total_loves).toggleClass('loved');
            }
        });
        return false;
    });
});
</script>

不过，我非常喜欢最佳实践，所以我想将jQuery移到一个外部JS文件中。

我怎么能取得这样的成就？

有什么建议吗？我对jQuery和PHP还是比较陌生的。

谢谢！

：）

我的解决方案结合了几种技术，其中一些技术已经在这个问题的答案中提到了。

是，将PHP与JS分离

首先：是的，你应该把JS和PHP分开。您可以将它放在一个单独的文件中，但您需要对当前代码进行一些更改。不要动态生成JS文件——这实际上扼杀了将JS代码分离成单独文件的优势（你不能缓存它等）

作为全局变量/函数自变量的公共变量

接下来，将您的通用变量作为全局变量存储在HTML文件的头中（尽管还有其他选择，但您实际上没有太多选择），最好分组在一个对象中：

var Globals = <?php echo json_encode(array(
    'active_user_id' => $active_user->id,
    'token' => $token,
    'hash' => $hash,
)); ?>;

或者，您可以将所有这些参数作为参数传递给将要调用的函数，但我假设您也在脚本的其他地方使用它们。

存储在data-属性中的容器相关数据

然后使用data-属性来存储与容器相关联的真实数据。您将不需要类似post1/post2/post3的类和单独的事件处理程序：

<div data-post-id="10">here is something</div>

而不是例如：

<div class="post10">here is something</div>

如何从外部JS文件中读取全局变量和data-属性

然后你的JavaScript可能看起来像：

$(document).ready(function(){
    $('[data-post-id]').click(function() {
        var el = $(this);
        var data = { 
            'post_id': el.data('post-id'),
            'user_id': Globals.active_user_id
        };
        data[Globals.token] = Globals.hash;
        $.ajax({
            'type': 'POST',
            'url': 'http://domain.com/ajax/add_love',
            'data': data,
            'dataType': 'json',
            'success': function(response) {
                el.html(response.total_loves).toggleClass('loved');
            }
        });
        return false;
    });
});

这应该足够了（尽管我没有测试）。

您可以始终使用PHP:中的参数调用函数

somefile.js:

function func(params) {
    //params is now from PHP
    //params.foo == "bar"
}

somefile.php：

<?php
    $params = array('foo' => 'bar');
?>
<script type="text/javascript">
$(function() {
    func(<?php echo json_encode($params); ?>);
});
</script>

我倾向于采用这种方法，因为它避免了全局变量，同时允许轻松传输变量。

我喜欢使用json_encode，因为任何有效的json都是有效的JS，这意味着你不必担心转义'或"如果你使用字符串并在其中回声PHP。

我通常这样做的方式是在页面中使用一些变量，然后所包含的JavaScript访问这些变量。

在您的主页中：

var post_id=<?php echo $post->id; ?>;

然后在您包含的JS文件中：

data: { post_id: post_id,

如果仍然希望包含PHP变量，则不能将其放入外部.js文件中。但是，您可以将代码放入一个单独的PHP文件中，该文件可以生成有效的Javascript输出（包括设置为"text/Javascript"的头中的内容类型！）。

在你的第一个PHP文件中，你可以参考第二个用生成Javascript代码的PHP文件

<script src="path/to/generateJS.php" type="text/javascript"></script>

我不知道是否有办法。但是，如果您设法在外部js文件中包含变量，这意味着这些文件将不得不作为呈现这些变量的php脚本来处理，而不仅仅是将它们呈现为静态文件。这将对性能产生不利影响。

仍然可以使用外部JS文件的一种方法是声明一个函数并从内联javascript向其传递参数。你的代码看起来像：

<script>
bindPost(<?php echo $post->id; ?>,<?php echo $active_user->id; ?>,'<?php echo $hash; ?>');
</script>

其中bindPost是在外部JS文件中声明的，并且可以很好地处理参数。

在不增加更多复杂性的情况下，最简单的方法是让服务器将Javascript文件视为PHP文件，这样您就可以在该文件中定义PHP变量，然后像在问题代码中所做的那样对其进行回显。

在apache上，这意味着创建一个.htaccess文件并添加以下行：

AddType x-httpd-php .js

（注意，这将把所有的javascript文件都作为PHP处理。如果你只想把一些javascript文件作为PHP处理，你需要制定一个更窄的.htaccess规则。）

相关文章：