在 CodeIgniter 3 中多次渲染视图

Posted

技术标签:

【中文标题】在 CodeIgniter 3 中多次渲染视图【英文标题】:View is being rendered multiple times in CodeIgniter 3 【发布时间】:2022-01-22 19:47:53 【问题描述】:

我正在使用 CodeIgniter 3 并在我的 index() 函数中将一些数据传递给我的视图并执行一些其他函数。但在我看来,相同的元素被渲染了 3 次。我认为那是因为我也在其他 2 个函数中加载了相同的视图。我需要一次渲染元素。我怎样才能做到这一点?太棒了!

视图的屏幕截图。缩小以捕获完整视图:

控制器代码:

<?php

class Insight extends CI_Controller


    public function index()
    
        $this->load->Model('Insight_Model');
        $data['donorcount'] = $this->Insight_Model->donorCount();

        $this->load->Model('Insight_Model');
        $data['packetcount'] = $this->Insight_Model->packetCount();

        $this->load->view('insight', $data);

        $this->bloodTypesChart();
        $this->genderCountsChart();
    


    public function bloodTypesChart()
    
        $query=" SELECT BloodType as blood_type, COUNT(PacketID) as packetcount FROM packets WHERE isAvailable = 1 GROUP BY blood_type";

        $packetChartData = [];
        $blood_types = $this->db->query($query)->result_array();

        foreach($blood_types as $row)
        
            $packetChartData['packetLabel'][] = $row['blood_type'];
            $packetChartData['packetData'][] = $row['packetcount'];
        
        $packetChartData['chart_data'] = json_encode($packetChartData);
        $this->load->view('insight',$packetChartData);
    

    public function genderCountsChart()
    
        $query=" SELECT DonorGender as donor_gender, COUNT(DonorID) as donor_count FROM donors GROUP BY donor_gender";

        $genderChartData = [];
        $genderCount = $this->db->query($query)->result_array();

        foreach($genderCount as $row)
        
            $genderChartData['genderLabel'][] = $row['donor_gender'];
            $genderChartData['genderData'][] = $row['donor_count'];
        
        $genderChartData['chart_data'] = json_encode($genderChartData);
        $this->load->view('insight',$genderChartData);
    


查看代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assests/styles/table.css'); ?>">
    <title>Kegalle Blood Bank - Blood Types Insight</title>
</head>
<body style="margin-bottom: 50px">
<?php include_once 'navbars/navbar2.php' ?>

<?php
if (!($this->session->userdata('isStaffLoggedIn'))) 
    redirect('home/login');

?>


<div class="container">
    <div class="row">
        <div class="col-md-12 text-center mt-5">
            <h1>Insight</h1>
        </div>
        <div class="row text-center m-5">
            <div class="col-md-6">
                <div class="card border-info mx-sm-1 p-3 shadow-lg">
                    <div class="card border-danger shadow text-danger p-3 my-card"><span class="fa fa-heart"
                                                                                         aria-hidden="true"></span>
                    </div>
                    <div class="text-danger text-center mt-3"><h4>Total Donors</h4></div>
                    <div class="text-danger text-center mt-2"><h1><?php echo $donorcount; ?></h1></div>

                </div>
            </div>
            <div class="col-md-6">
                <div class="card border-success mx-sm-1 p-3 shadow-lg">
                    <div class="card border-success shadow text-success p-3 my-card"><span class="fa fa-eye"
                                                                                           aria-hidden="true"></span>
                    </div>
                    <div class="text-success text-center mt-3"><h4>Total Available Packets</h4></div>
                    <div class="text-success text-center mt-2"><h1><?php echo $packetcount; ?></h1></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="chart-container container mb-4">
    <div class="bar-chart-container">
        <canvas id="packet-count-chart" style="background: #ecf5ec"></canvas>
    </div>
</div>

<div class="chart-container container">
    <div class="doughnut-chart-container">
        <canvas id="gender-count-chart" style="background: #ecf5ec"></canvas>
    </div>
</div>

<?php include_once 'footer/footer.php' ?>
</body>

<script>
    const ctx1 = document.getElementById('packet-count-chart');
    const chart1 = new Chart(ctx1, 
        type: 'bar',
        data: 
            labels: <?php echo json_encode($packetLabel)?>,
            datasets: [
                label: '# of packets available',
                data: <?php echo json_encode($packetData)?>,
                backgroundColor: [
                    'rgba(255, 99, 132)',
                    'rgba(54, 162, 235)',
                    'rgba(255, 206, 86)',
                    'rgba(75, 192, 192)',
                    'rgba(153, 102, 255)',
                    'rgba(255, 159, 64)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            ]
        ,
        options: 
            responsive:true,
            scales: 
                y: 
                    beginAtZero: true
                
            
        
    );

    const ctx2 = document.getElementById('gender-count-chart');
    const chart2 = new Chart(ctx2, 
        type: 'doughnut',
        data: 
            labels: <?php echo json_encode($genderLabel)?>,
            datasets: [
                label: '# of donors',
                data: <?php echo json_encode($genderData)?>,
                backgroundColor: [
                    'rgba(255, 99, 132)',
                    'rgba(54, 162, 235)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)'
                ],
                borderWidth: 1
            ]
        ,
        options: 
            scales: 
                y: 
                    beginAtZero: true
                
            
        
    );
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

</html>

【问题讨论】:

现在您正在加载 3 * 洞察视图,每个控制器功能一个,为什么?你真正需要什么数据?我想不是完整的视图文件? 我需要防止多次加载视图并将index() 函数中的donorcountpacketcount 数据传递给视图。我还需要将bloodTypesChart() 函数中的packetLabelpacketData 数据和genderCountsChart() 函数中的genderLabelgenderData 数据传递给洞察视图。 你已经有一个答案,它告诉你如何只将数据发送到视图 当我在 JS 外部回显它时,它可以正确输出,但在 JS 代码中不起作用。 在你的视图顶部做一个echo '&lt;pre&gt;';print_r($data); die;,看看数组结构是怎样的,并相应地处理你的js部分 【参考方案1】:

收集所有数据,打包成$data,传递给view。 顺便说一句,

labels: &lt;?php echo json_encode($packetLabel)?&gt;,

,太可怕了。使用 Ajax 获取此数据

控制器

<?php

class Insight extends CI_Controller


    public function index()
    
        $this->load->Model('Insight_Model');
        $data['donorcount'] = $this->Insight_Model->donorCount();
        $data['packetcount'] = $this->Insight_Model->packetCount();
        $data['packetChartData'] = $this->bloodTypesChart();
        $data['genderChartData'] =  $this->genderCountsChart();
        $this->load->view('insight', $data);

    

    public function bloodTypesChart()
    
        $query=" SELECT BloodType as blood_type, COUNT(PacketID) as packetcount FROM packets WHERE isAvailable = 1 GROUP BY blood_type";

        $packetChartData = [];
        $blood_types = $this->db->query($query)->result_array();

        foreach($blood_types as $row)
        
            $packetChartData['packetLabel'][] = $row['blood_type'];
            $packetChartData['packetData'][] = $row['packetcount'];
        
        return $packetChartData;
    

    public function genderCountsChart()
    
        $query=" SELECT DonorGender as donor_gender, COUNT(DonorID) as donor_count FROM donors GROUP BY donor_gender";

        $genderChartData = [];
        $genderCount = $this->db->query($query)->result_array();

        foreach($genderCount as $row)
        
            $genderChartData['genderLabel'][] = $row['donor_gender'];
            $genderChartData['genderData'][] = $row['donor_count'];
        
        return $genderChartData;

    


查看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assests/styles/table.css'); ?>">
    <title>Kegalle Blood Bank - Blood Types Insight</title>
</head>
<body style="margin-bottom: 50px">
<?php include_once 'navbars/navbar2.php' ?>

<?php
if (!($this->session->userdata('isStaffLoggedIn'))) 
    redirect('home/login');

?>


<div class="container">
    <div class="row">
        <div class="col-md-12 text-center mt-5">
            <h1>Insight</h1>
        </div>
        <div class="row text-center m-5">
            <div class="col-md-6">
                <div class="card border-info mx-sm-1 p-3 shadow-lg">
                    <div class="card border-danger shadow text-danger p-3 my-card"><span class="fa fa-heart"
                                                                                         aria-hidden="true"></span>
                    </div>
                    <div class="text-danger text-center mt-3"><h4>Total Donors</h4></div>
                    <div class="text-danger text-center mt-2"><h1><?php echo $donorcount; ?></h1></div>

                </div>
            </div>
            <div class="col-md-6">
                <div class="card border-success mx-sm-1 p-3 shadow-lg">
                    <div class="card border-success shadow text-success p-3 my-card"><span class="fa fa-eye"
                                                                                           aria-hidden="true"></span>
                    </div>
                    <div class="text-success text-center mt-3"><h4>Total Available Packets</h4></div>
                    <div class="text-success text-center mt-2"><h1><?php echo $packetcount; ?></h1></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="chart-container container mb-4">
    <div class="bar-chart-container">
        <canvas id="packet-count-chart" style="background: #ecf5ec"></canvas>
    </div>
</div>

<div class="chart-container container">
    <div class="doughnut-chart-container">
        <canvas id="gender-count-chart" style="background: #ecf5ec"></canvas>
    </div>
</div>

<?php include_once 'footer/footer.php' ?>
</body>


 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
 
<script>
    const ctx1 = document.getElementById('packet-count-chart');
    const chart1 = new Chart(ctx1, 
        type: 'bar',
        data: 
            labels: <?php echo isset($genderChartData['genderLabel'])?json_encode($packetChartData['packetLabel']):'[]';?>,
            datasets: [
                label: '# of packets available',
                data: <?php echo isset($genderChartData['genderLabel'])?json_encode($packetChartData['packetData']):'[]';?>,
                backgroundColor: [
                    'rgba(255, 99, 132)',
                    'rgba(54, 162, 235)',
                    'rgba(255, 206, 86)',
                    'rgba(75, 192, 192)',
                    'rgba(153, 102, 255)',
                    'rgba(255, 159, 64)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            ]
        ,
        options: 
            responsive:true,
            scales: 
                y: 
                    beginAtZero: true
                
            
        
    );
 
    const ctx2 = document.getElementById('gender-count-chart');
    const chart2 = new Chart(ctx2, 
        type: 'doughnut',
        data: 
            labels: <?php echo isset($genderChartData['genderLabel'])?json_encode($genderChartData['genderLabel']):'[]';?>,
            datasets: [
                label: '# of donors',
                data: <?php echo isset($genderChartData['genderLabel'])?json_encode($genderChartData['genderData']):'[]'; ?>,
                backgroundColor: [
                    'rgba(255, 99, 132)',
                    'rgba(54, 162, 235)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)'
                ],
                borderWidth: 1
            ]
        ,
        options: 
            scales: 
                y: 
                    beginAtZero: true
                
            
        
    );
</script>
</html>

检查一下

【讨论】:

感谢@WiatroBosy!以上代码不能与&lt;?php echo json_encode($packetLabel)?&gt; 一起使用吗?为什么这是获取数据的糟糕方法?最后,您能否告诉我如何使用 Ajax 获取这些数据? 上面的代码应该可以工作 - 在你的地方检查一下。 Ajax - 阅读一些教程w3schools.com/jquery/ajax_ajax.asp 当您尝试使用&lt;?php echo json_encode($packetLabel)?&gt; 获取数据时,它不会输出任何内容。但是当你echo $packetChartData 时,它会输出关联数组。 更正视图中变量的名称。 我更正了代码。立即查看

以上是关于在 CodeIgniter 3 中多次渲染视图的主要内容,如果未能解决你的问题,请参考以下文章

使用 cpanel 的 codeigniter 密码保护目录

MYSQL在codeigniter中多次插入[重复]

在codeigniter中多次进入mysql时获取最后插入的'Id'

Squirrel SQL 渲染在 SQL 视图中闪烁

在codeigniter中没有从视图中调用控制器

渲染视图时会自动“缓存”啥?