javascript - 使用 Jquery/Ajax 在 View 中显示 codeigniter 函数的结果

Question

我目前正在使用 codeigniter 开展一个项目。我有一个名为 dashboard.php 的 View 页面。在仪表板中，我的任务是显示图表。从 dashbord.php 我正在调用 Controller 函数，它是 stat()。我使用 Morris.js 创建了图表，它位于 stat.php。

Controller 函数stat()

  public function stat()
  {
    $this->load->view('template/admin_header', $data);
    $this->load->view('merchant/stat', $data);
    $this->load->view('template/footer', $data);
  } 

查看页面stat.php

<script>
$(function() {
     Morris.Area({
        element: 'morris-area-chart-scan-payment',
        data: [
        {
            period: 'Mon',
            spoint: 2666,
            mpayment: null,
        }, 
        {
            period: 'Tue',
            spoint: 2778,
            mpayment: 1350,
        }, 
        {
            period: 'Wed',
            spoint: 4912,
            mpayment: 1969,
        } 
      ], 

      xkey: 'period',
     ykeys: ['spoint', 'mpayment'],
     labels: ['Scan Point', 'Payment'],
     parseTime: false,
     pointSize: 2,
     hideHover: 'auto',
     resize: true
     });
  });
 </script>

 <div id="morris-area-chart-scan-payment"></div>

dashboard.php View 页面

<div id="div1"></div>

我在 View 页面 dashboard.php 中创建了一个 div 标签。如何使用 JQuery/Ajax 在 dashboard.php 中的 stat.php 中显示图表？

Answer 1

Codeigniter 应该将 morris 数据的 array 作为 json 返回到将在下面的 ajax 中请求的 url 上

$(function() {
  var morris_area = Morris.Area({
    element: 'morris-area-chart-scan-payment',
    data: [
      {
        period: 'Mon',
        spoint: 2666,
        mpayment: null,
      }, 
      {
        period: 'Tue',
        spoint: 2778,
        mpayment: 1350,
      }, 
      {
        period: 'Wed',
        spoint: 4912,
        mpayment: 1969,
      } 
    ], 
    xkey: 'period',
    ykeys: ['spoint', 'mpayment'],
    labels: ['Scan Point', 'Payment'],
    parseTime: false,
    pointSize: 2,
    hideHover: 'auto',
    resize: true
  });

  $('.some-button').on('click', function loadMorrisData() {
    $.ajax({
      url: "http://your-test-url.something",
      success: function(data) {
        morris_area.setData(data);
      }
    });
  });
});