点击modal_anchor时控制器双函数同步接收Ajax数据求助

方案一：合并接口职责（推荐） #

将视图加载与数据获取逻辑合并到一个接口中，单次请求即可完成模板渲染和流量数据传递，避免多请求协同问题。

修改控制器代码 #

public function online_details() { 
    $this->access_only_allowed_members();           
    
    // 1. 执行流量数据获取逻辑
    $API = new Mikweb();    
    $API->connect('192.168.88.6', 'shyriad', 'shyriad#1332');           
    $interface = $this->request->getPost('id');

    $getinterfacetraffic = $API->comm("/interface/monitor-traffic",  array("interface" => "$interface", "once" => " "));              
    $rows = ['name' => 'Tx', 'data' => [$getinterfacetraffic[0]['tx-bits-per-second']]];
    $rows2 = ['name' => 'Rx', 'data' => [$getinterfacetraffic[0]['rx-bits-per-second']]];
    
    $traffic_data = array($rows, $rows2); 

    // 2. 将流量数据传递给视图
    $this->template->set("traffic_data", json_encode($traffic_data, JSON_NUMERIC_CHECK));
    
    // 3. 返回渲染后的模板视图
    return $this->template->view("clients/online_details"); 
}

// 保留原online_bandwidth接口（可选，用于单独获取数据场景）
public function online_bandwidth() {
    $this->access_only_allowed_members();           
    $API = new Mikweb();    
    $API->connect('192.168.88.6', 'shyriad', 'shyriad#1332');           
    $interface = $this->request->getPost('id');

    $getinterfacetraffic = $API->comm("/interface/monitor-traffic",  array("interface" => "$interface", "once" => " "));              
    $rows = ['name' => 'Tx', 'data' => [$getinterfacetraffic[0]['tx-bits-per-second']]];
    $rows2 = ['name' => 'Rx', 'data' => [$getinterfacetraffic[0]['rx-bits-per-second']]];
    
    print json_encode(array($rows, $rows2), JSON_NUMERIC_CHECK); 
} 

修改锚点目标地址 #

modal_anchor(get_uri("clients/online_details"), "<i data-feather='tablet' class='icon-16'></i>", 
array(  "class" => "edit", 
        "title" => app_lang('clients_current_session_details'),  
        "data-post-id" => ($data['.id'])
)

视图中初始化图表 #

在clients/online_details视图中直接使用传递的流量数据初始化Highcharts：

var trafficData = <?php echo $traffic_data; ?>;
Highcharts.chart('chart-container', {
    series: trafficData,
    // 其他图表配置项
});

方案二：前端触发双请求 #

如果不想修改后端接口职责，可在模态框加载完成后，手动发起流量数据请求。

修改锚点目标地址 #

将锚点指向online_details接口：

modal_anchor(get_uri("clients/online_details"), "<i data-feather='tablet' class='icon-16'></i>", 
array(  "class" => "edit", 
        "title" => app_lang('clients_current_session_details'),  
        "data-post-id" => ($data['.id'])
)

前端添加请求逻辑 #

利用模态框的加载完成事件，发起流量数据请求：

// 监听模态框加载完成事件（根据你使用的UI框架调整事件名）
$(document).on("modal.loaded", function(e, modal) {
    // 获取传递的接口ID
    var interfaceId = modal.data("post-id");
    // 请求流量数据并渲染图表
    $.post("<?php echo get_uri('clients/online_bandwidth'); ?>", {id: interfaceId}, function(response) {
        Highcharts.chart('chart-container', {
            series: response,
            // 其他图表配置项
        });
    }, "json");
});

内容的提问来源于stack exchange，提问作者Md Shyriad Rahman