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

时间：2012-03-11 08:56:38

标签： php javascript jquery

我的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的新手。

谢谢！

：）

6 个答案:

答案 0 :(得分：12)

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

是的，将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;
    });
});

这应该足够了（虽然我没有测试过）。

答案 1 :(得分：3)

您总是可以使用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。

答案 2 :(得分：1)

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

在您的主页中：

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

然后在你附带的JS文件中：

data: { post_id: post_id,

答案 3 :(得分：0)

如果您仍想要包含PHP变量，则无法将其放入外部.js文件中。但是您可以将代码放入一个单独的PHP文件中，该文件生成有效的Javascript输出（包括设置为“text / javascript”的标题中的内容类型！）。

在您的第一个PHP文件中，您可以参考使用

生成Javascript代码的第二个PHP文件 
<script src="path/to/generateJS.php" type="text/javascript"></script>

答案 4 :(得分：0)

我不知道是否存在某种方式。但是如果你设法在外部js文件中包含变量，则意味着必须将这些文件作为php脚本处理来呈现这些变量，而不是仅将它们呈现为静态文件。这会对性能造成不利影响。

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

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

在外部JS文件中声明bindPost并很好地处理参数。

答案 5 :(得分：0)

在不增加更多复杂性的情况下，最简单的方法是让服务器将Javascript文件视为PHP文件，以便您可以在该文件中定义PHP变量，然后完全按照您的方式回显它们在你的问题的代码中做。

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

AddType x-httpd-php .js

（请注意，这会将所有javascript文件作为PHP处理。如果您只想将某些Javascript文件作为PHP处理，则需要制作更窄的.htaccess规则。）

相关问题
最新问题