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

xkftehaa  于 2023-03-07  发布在  WordPress
关注(0)|答案(1)|浏览(202)

正如在标题我有一个WP手工制作的插件之间的WP数据库和一堆脚本交互(JS和PHP)。首先,我的插件结构由一个脚本组成,像往常一样被Wp引擎解析为插件,这样就可以添加一个重定向到我内部Web App的菜单项。其他东西如CSS、UI库等都是用wp_enqueue导入的。直接进入问题,我只是想做一个php/JS脚本,从一个专门的php代码段中获取数据,从我创建的自定义可湿性粉剂数据库中收集数据,并将它们绘制成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 } ?>

我很抱歉,如果这种方式来开发插件是不是正确的方式,但我开始从地面谷歌在这里和那里。我想这可能是与范围或类似挂钩的正确部分时,加载所有的东西,但我不确定。

siotufzp

siotufzp1#

感谢图片修复链接。@ asiqur拉赫曼它的作品wowww。这项技术允许我以更扩展的方式开发我的插件。

相关问题