您的位置: 首页  >  技术问答  >  在外部JS文件中包含PHP变量？

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

分类: 技术问答 • 2022-03-26 22:53:06

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

问题描述：

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

I have a few lines of jQuery in my web application. This code is inline at the moment because it accepts a couple of PHP variables.

<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文件。

I'm a big fan of best practices though, so I would like to move my jQuery into an external JS file.

我怎么能实现这样的壮举？

How could I achieve such a feat?

有什么提示吗？我还是jQuery和PHP的新手。

Any tips? I'm still relatively new to jQuery and PHP.

谢谢！

：）

答

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

My solution combines several techniques, some of which are already mentioned within the answers to this question.

首先：是的，您应该将JS与PHP分开。您可以将其放在单独的文件中，但是您需要对当前代码进行一些更改。不要动态生成JS文件 - 它实际上杀死了将JS代码分离到单独文件中的优点（你无法缓存它等）。

First of all: yes, you should separate your JS from PHP. You can put it in a separate file, but you will need to make some changes into your current code. Do not make JS file dynamically generated - it actually kills the advantages of separating JS code into separate file (you cannot cache it etc.).

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

Next, store your common variables as global variables in the header of HTML file (you do not really have much choice, although there are other alternatives), preferably grouped in one object:

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

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

Alternatively you can pass all of them as argument(s) to the function you will call, but I assumed you are using them also in other places in your script.

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

Then use data- attributes for storing real data associated with containers. You won't need post1/post2/post3-like classes and separate event handlers for them:

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

而不是例如：

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



如何读取全局变量和数据 - 属性来自外部JS文件



然后您的JavaScript可能如下所示：

How to read globals and data- attributes from external JS file

And then your JavaScript may look like:

$(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;
    });
});

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

And this should be sufficient (although I did not test it).

相关推荐