如何使用 javascript 包含 php 文件答案

【问题标题】：How to include a php file with javascript如何使用 javascript 包含 php 文件
【发布时间】：2022-01-23 16:05:10
【问题描述】：

我正在尝试在我的文件 index.php 中包含 javascript，问题是 javascript 在 php 文件扩展名 charts.php 中，当我尝试将 javascript 链接到我的 index.php 时，它不起作用，那么该怎么做我将charts.php 链接到index.php？

我试过了

<script>
    <?php include_once "../assets/js/charts.php";?>
</script>

还有

<script src="../assets/js/charts.php"></script>

这两个都不行。

示例charts.php

<!-- Gender stats of user -->
<script type=''>
var options = {
    chart: {
        height: 320,
        type: 'pie',
    }, 
    <?php echo "series: [$gender[0],$gender[1],$gender[2]],"?>
    labels: ['Male','Female','Not specify'],
    legend: {
        show: true,
        position: 'bottom',
        horizontalAlign: 'center',
        verticalAlign: 'middle',
        floating: false,
        fontSize: '14px',
        offsetX: 0,
        offsetY: 7
    },
    responsive: [{
        breakpoint: 600,
        options: {
            chart: {
                height: 240
            },
            legend: {
                show: false
            },
        }
    }]

}

var chart = new ApexCharts(
    document.querySelector("#gender-pie-user"),
    options
);

chart.render();
</script>

虽然charts.php 有一个 php 文件扩展名，但它主要是 Javascript 和我的数据库中的一些 php 变量。我应该注意，如果我将charts.js 代码直接包含在 index.php 中，它就可以工作。

例如，这是可行的：

// index.php
<script type=''>
var options = {
    chart: {
        height: 320,
        type: 'pie',
    }, 
    <?php echo "series: [$gender[0],$gender[1],$gender[2]],"?>
    labels: ['Male','Female','Not specify'],
    legend: {
        show: true,
        position: 'bottom',
        horizontalAlign: 'center',
        verticalAlign: 'middle',
        floating: false,
        fontSize: '14px',
        offsetX: 0,
        offsetY: 7
    },
    responsive: [{
        breakpoint: 600,
        options: {
            chart: {
                height: 240
            },
            legend: {
                show: false
            },
        }
    }]

}

var chart = new ApexCharts(
    document.querySelector("#gender-pie-user"),
    options
);

chart.render();
</script>

虽然这不起作用：

// index.php
<script src='../assets/js/charts.php'></script>

【问题讨论】：

当您尝试<script src='../assets/js/charts.php'></script> ...时，您是否检查了浏览器控制台的内容？我猜它可能在那里说浏览器拒绝将其作为脚本代码执行，因为 Content-Type 标头说 text/html ...

标签： javascript php

【解决方案1】：

<?php require __DIR__ . "/../assets/js/charts.php";?>

是应该工作的那个。将其切换为 require 以查看是否可以完全解析路径。我还建议以 __DIR__ 开头 - 将路径设为绝对路径。

【讨论】：

【解决方案2】：

PHP 默认不输出内容。所以当你这样做时：

<script>
    <?php include_once "../assets/js/charts.php";?>
</script>

你实际上只是将charts.php中的内容包含到内存中，但从不输出它。

这样的事情更有可能奏效：

<script>
    <?php echo require("../assets/js/charts.php");?>
</script>

【讨论】：

正如 Bjørn Büttner 建议的那样，尝试在相对路径前加上 __DIR__ 前缀，以确保从包含文件的目录解析路径。例如。 require(__DIR__ . "/../assets/js/charts.php")
查看charts.php的内容。您的想法是将脚本块放在脚本块中，这是行不通的。并且 .PHP 文件仍会自动输出不在 <?php 标记内的任何内容（因为实际上它是输出非 php 内容的网络服务器，它永远不会转到 PHP）。不太清楚这个答案是如何管理任何支持的
@ADyson 我听取了您的建议并删除了charts.php 中的脚本标签，现在似乎可以使用了。

【解决方案3】：

另一种方法是将动态 php 数据保存到 html data-attribute 中，如下所示：

<?php
$gender_arr =[
    'male',
    'female',
    'not_specify'
];
?>
<div id="gender-pie-user" data-series='<?php echo json_encode($gender_arr);?>'></div>

示例输出：

<div id="gender-pie-user" data-series='["male","female","not_specify"]'></div>

这样您可以将图表初始化脚本保存为静态 js 文件：

    let genderPie = document.querySelector("#gender-pie-user");
    
    // render chart if #genderPie element exists
    if(genderPie){
    
        let genderPieSeries = genderPie.getAttribute('data-series');
        var options = {
            chart: {
                height: 320,
                type: 'pie',
            }, 
            //parse data attribute
            series: JSON.parse(genderPieSeries),
            labels: ['Male','Female','Not specify'],
            legend: {
                show: true,
                position: 'bottom',
                horizontalAlign: 'center',
                verticalAlign: 'middle',
                floating: false,
                fontSize: '14px',
                offsetX: 0,
                offsetY: 7
            },
            responsive: [{
                breakpoint: 600,
                options: {
                    chart: {
                        height: 240
                    },
                    legend: {
                        show: false
                    },
                }
            }]
        }
    
        var chart = new ApexCharts(
            genderPie,
            options
        );
    
        chart.render();
    }

通过这种方式，您可以轻松地为不同的图表数据视图重用您的初始化函数，并从静态 js 文件缓存中受益。

【讨论】：