如何在 javascript 中包含 php 文件

Question

I am trying to include javascript for my file index.php , the problem is the javascript is inside a php file extension charts.php and when I try to link the javascript to my index.php it dosent work, so how do I link 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 和我的数据库中的一些ZE1BFD762321E409CEEZCEEZAC063 变量。 我应该注意，如果我直接在 index.php 中包含了charts.js代码，它就可以工作。

例如，这有效：

// 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>

Answer 1

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

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

Answer 2

PHP 默认不包含 output 内容。 所以当你这样做时：

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

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

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

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

Answer 3

另一种方法是将动态 php 数据保存到 html数据属性，如下所示：

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

示例 output：

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

这样您就可以将图表初始化脚本保存为 static 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();
    }

这样，您可以轻松地将初始化 function 用于不同的图表数据视图，并从 static js 文件缓存中受益。