javascript - 获取 Javascript 文件中的 PHP 变量

Question

我的服务器上有一个 PHP 文件，它正在计算目录中的文件数量。我想获取 Javascript 文件中的文件数量 ($fileCount)。

numberOfImages.php:

<?php
$dir = "/my/directory/";
$fi = new FilesystemIterator($dir, FilesystemIterator::SKIP_DOTS);
$fileCount = iterator_count($fi);
echo $fileCount; 

?>

ma​​in.js (外部 JS 文件)我的 JS 文件中还没有任何与 php 文件相关的代码。我想从我的 PHP 文件( http://www.website/numberOfImages.php )获取变量并在我的外部 JS 文件中使用它(提醒它)。

我愿意使用 AJAX。

Answer 1

您可以采用两种可能性之一... 选项编号。 1:您可以将图像数量公开为全局变量并在 main.js 中使用它(假设 main.js 包含在 numberOfImages.php 脚本中。选项 Nr. 2 您也可以使用 Ajax 来做到这一点:

选项 NR。 1

    <?php 
        //FILE =>numberOfImages.php:

        $dir = "/my/directory/";
        $fi = new FilesystemIterator($dir, FilesystemIterator::SKIP_DOTS);
        $fileCount = iterator_count($fi);

        // EXPOSE THIS VARIABLE TO JAVASCRIPT AS A GLOBAL VARIABLE..
        //echo $fileCount; 

    ?>
        // SOMEWHERE IN THE SAME FILE: numberOfImages.php:
        <script type="text/javascript">
            var _NUM_IMAGES = "<?php echo $fileCount; ?>"; 
        </script>

现在，您只需引用变量 _NUM_IMAGES 即可访问 main.js 中的图像数量。所以做alert(__NUM_IMAGES)会起作用。但是，请确保 main.js 包含在 numberOfImages.php 文件中

选项 NR 2

    // INSIDE YOUR HTML/PHP FILE THAT RUNS THE SHOW; IMPORT BOTH JQUERY & YOUR main.js BELOW. 
    // INCLUDE JQUERY LIBRARY: OTHERWISE THIS WON'T WORK...
    // SURE YOU CAN ALSO DO ALL THESE IN PURE JAVASCRIPT, BUT WHY RE-INVENT THE WHEEL???
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script type="text/javascript" src="main.js"></script>

        //YOUR main.js COULD LOOK SOMETHING LIKE THIS:::
        jQuery.noConflict();
        (function ($) {
            $(document).ready(function(e) {
                $.ajax({
                    url: 'numberOfImages.php',     // <== POINTS TO THE VALID URL OF THE PHP FILE THAT OUTPUTS THE NUMBER OF IMAGES...
                    dataType: "HTML",
                    cache: false,
                    type: "POST",

                    //HANDLE THE SUCCESS CASE FOR THE AJAX CALL
                    success: function (data, textStatus, jqXHR) {
                        if(data){
                            alert(data);
                        }
                    },

                    //HANDLE THE FAILURE CASE FOR THE AJAX CALL
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.log('The following error occured: ' + textStatus, errorThrown);
                    },

                    //HANDLE THE EVENT-COMPLETE CASE FOR THE AJAX CALL
                    complete: function (jqXHR, textStatus) {
                    }
                });
            });
        })(jQuery);

numberOfImages.php 可能看起来像这样。与您的操作方式完全相同:

        <?php

            /**
             * filename: numberOfImages.php
             */

            $dir        = "/my/directory/";
            $fi         = new FilesystemIterator($dir, FilesystemIterator::SKIP_DOTS);
            $fileCount  = iterator_count($fi);

            die($fileCount);

但是，请注意，您需要 JQuery 才能实现此功能。您可以在导入 main.js 之前将其添加到要在其中导入 main.js 的文件中。