如何调用自定义 php 脚本从 Javascript 默认的 Fetch 函数中获取数据

Question

如标题所示，我有一个 Wp 手工制作的插件，可以在 WP 数据库和一堆脚本（JS 和 PHP）之间进行交互。 首先，我的插件结构由 Wp 引擎通常解析为插件的脚本组成，因此添加了一个重定向到我的内部 Web 应用程序的菜单项。 其他东西如 CSS 、 UI 库等是用 wp_enqueue 导入的。 直奔问题，我只想制作一个 php/JS 脚本，该脚本从专用的 php 片段中获取，该片段从我创建的自定义 WP 数据库中收集数据并将它们绘制到 JS 图表中。

我试过了，当在 console.log() 中测试时，我得到了这个：

以下是感兴趣的脚本

// utility script which query the internal DB (funzioniAccessoDB.php )

function groupContactsBySector() {
    global $wpdb;
    $tableName=$wpdb->prefix."poseidone_contatti";
    $results= $wpdb->get_results("SELECT settore,COUNT(*) as 'contattiPerSettore' FROM $tableName GROUP BY settore",ARRAY_A);
    return $results;
}
?>

// getDataForCharts.php

<?php 
include_once("funzioniAccessoDB.php");

$data= groupContactsBySector();

//echo json_encode($data);
//echo $data;
?>

// charts-JS.js ( script to render charts with fetched data )
let ctx = document.getElementById("myChart");

let chart=new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});


fetch("http://localhost/wordpress/wp-content/plugins/PoseidoneProject/getDataForCharts.php").
    then((response) => { return response.text() } ).
    then((data) => {

        console.log(data);
    }).
    catch((error) => console.log(error));

// GESTORE-CONTATTI.php

<?php


 include "funzioniAccessoDB.php";


function print_pagina_gestione_contatti()  {

// INIZIO GESTIONE DIPENDENZE DI SCRIPTS E STILI CSS ESTERNI
  wp_enqueue_script( 
            "tailwind-css-CDN", 
            "https://cdn.tailwindcss.com", 
            array(),
            null, 
            false );
wp_enqueue_script( 
            "alpine-js", 
            "https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine.js", 
            array(),
            null, 
            false );

wp_enqueue_script(
    "charts-js-CDN",
    "https://cdn.jsdelivr.net/npm/chart.js",
    array(),
    null,
    false);
            
            wp_enqueue_script( 
            "toggleSidebar-script", 
            "/wp-content/plugins/PoseidoneProject/toggleBarScript.js", 
            array(),
            null, 
            true );
            
            wp_enqueue_script( 
            "charts-script", 
            "/wp-content/plugins/PoseidoneProject/charts-JS.js", 
            array(),
            null, 
            false );
            
 wp_enqueue_style( 
            "gestore-contatti-css", 
            "/wp-content/plugins/PoseidoneProject/styles.css", 
            array(),
            null, 
            false );    
 
     ?>

     <h1>Pannello amministrazione contatti</h1>
    

     <?php 
    if ( !isset($_GET["sezione"]) ) {
        include_once("index.php");
    }

     switch ($_GET["sezione"]) {
        case 'contattiClienti':

            include_once("contattiClienti.php");
    
        break;

        case "gestioneContratti":

            include_once("gestioneContratti.php");

        break;

        case "dashboard":
            
                    include_once("dashboard.php");
    
        break;
        case "home":

                    include_once("index.php");

        break;
    }
 ?>

  <?php } ?>
    
    
  

如果这种开发插件的方式不是正确的方式，我很抱歉，但我是从这里和那里的谷歌搜索开始的。 我认为这可能与范围有关，或者在加载所有内容时挂钩正确的部分，但我不确定。