Question

我想在另一个javascript中使用ajax响应数据。

AJAX在视图中（sell_report.php）

    <script src="<?php echo base_url(); ?>public/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
                  $('.select_year_product').on('change',function () {
                         var select_year_product = $('.select_year_product').val();

                         $.ajax({

                            method : "POST",
                            url : '<?php echo site_url('sell_report/select_data_yearwise'); ?>',
                            data: { select_year_product:select_year_product },
                                success : function (data){
                                        alert(data);            
                                }

                         });                           
                    });
    </script>

上面是ajax调用，我必须从数据库中逐步选择产品才能正常工作。我在ajax响应中的警报（数据）中得到了响应。下面是我的控制器代码，从这里我得到了结果。

Sell_report.php（Controller）

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Sell_report extends CI_Controller {
    public function select_data_yearwise()
    {
        $select_year_product = $this->input->post('select_year_product');
        $res_yearwise = $this->db->query("select * from product where year='$select_year_product'");
        $row_yearwise = $res_yearwise->result();
        print_r($row_yearwise);         
        exit();
    }
}

现在，

我想在同一视图中的另一个javascript中使用此响应我写的是ajax脚本。

我想要ajax响应的脚本如下所述。这个脚本用于动态图我必须传递每个循环中ajax响应数组中的值。

<script type="text/javascript">
    var Script = function () {
    //morris chart

    $(function () {
      // data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type


      Morris.Bar({
        element: 'hero-bar',
        data: [
          {device: 'iPhone', geekbench: 136},
          {device: 'iPhone 3G', geekbench: 137},
          {device: 'iPhone 3GS', geekbench: 275},
          {device: 'iPhone 4', geekbench: 380},
          {device: 'iPhone 4S', geekbench: 655},
          {device: 'iPhone 5', geekbench: 1571}
        ],
        xkey: 'device',
        ykeys: ['geekbench'],
        labels: ['Geekbench'],
        barRatio: 0.4,
        xLabelAngle: 35,
        hideHover: 'auto',
        barColors: ['#6883a3']
      });



      $('.code-example').each(function (index, el) {
        eval($(el).text());
      });
    });
}();
</script>

使用AJAX响应编辑：

Array
(
    [0] => stdClass Object
        (
            [id] => 25
            [name] => Product 1 
            [handle] => Handle1
            [description] => <p>This is for Testing..!</p>
            [total_order_income] => 1420
            [type_id] => 19
            [brand_id] => 5
            [supplier_id] => 5
            [final_price] => 147
            [user_id] => 2
            [supplier_code] => 123456
            [sales_account_code] => 123456
            [purchase_account_code] => 123456
            [supply_price] => 100
            [markup] => 5
            [retail_price] => 105
            [tax_amount] => 42
            [quantity] => 50
            [status] => 1
            [dt_added] => 1472551929
            [dt_updated] => 1472551929
        )

    [1] => stdClass Object
        (
            [id] => 29
            [name] => Samsung 4G
            [handle] => Samsung 4G
            [description] => <p>It is very good phone</p>
            [total_order_income] => 1420
            [type_id] => 18
            [brand_id] => 6
            [supplier_id] => 1
            [final_price] => 121
            [user_id] => 2
            [supplier_code] => 100
            [sales_account_code] => 200
            [purchase_account_code] => 300
            [supply_price] => 100
            [markup] => 10
            [retail_price] => 110
            [tax_amount] => 11
            [quantity] => 0
            [status] => 1
            [dt_added] => 1472627773
            [dt_updated] => 1472627773
        )

    [2] => stdClass Object
        (
            [id] => 30
            [name] => Product 12
            [handle] => Handle
            [description] => Description
            [total_order_income] => 1420
            [type_id] => 0
            [brand_id] => 0
            [supplier_id] => 0
            [final_price] => 150
            [user_id] => 2
            [supplier_code] => Description
            [sales_account_code] => 123
            [purchase_account_code] => Description
            [supply_price] => 
            [markup] => 
            [retail_price] => 
            [tax_amount] => 
            [quantity] => 20
            [status] => 1
            [dt_added] => 1472628990
            [dt_updated] => 1472628990
        )

)

这是x轴，我想要产品名称和我想要的y轴 total_order_income。

Answer 1

创建条形图。 Morris.Bar(options)返回条形图对象以供将来使用，因此请务必保存对它的引用。（更新数据）
连接年度更改事件，以便您执行AJAX请求。如果在创建条形图并在同一范围内执行此操作后，可以使用该图表而不为其创建全局变量。（yay for closures）
在AJAX成功回调中，处理数据以将其转换为正确的格式。

仍然在AJAX回调中，请调用chart.setData(data)来更新图表。

/* Step 1 */
var bar_chart = Morris.Bar({
  element: 'hero-bar',
  data: [],
  xkey: 'device',
  ykeys: ['geekbench'],
  labels: ['Geekbench'],
  barRatio: 0.4,
  xLabelAngle: 35,
  hideHover: 'auto',
  barColors: ['#6883a3']
});

/* Step 2 */
$('.select_year_product').on('change',function () {
  var select_year_product = $('.select_year_product').val();
  $.ajax({
    method : "POST",
    url : '<?php echo site_url('sell_report/select_data_yearwise'); ?>',
    data: { select_year_product:select_year_product },
    success : function (data){
      /* Step 3: format data here */
      /* Step 4 */
      bar_chart.setData(data);
    }
  });                           
});

如果您需要第3步的帮助，那么我很乐意给出一些指示，但是从AJAX请求中提供一些示例响应会很有帮助。

编辑：在发送数据之前对数据进行JSON编码比解析print_r输出更有意义：

public function select_data_yearwise()
{
    $select_year_product = $this->input->post('select_year_product');
    $res_yearwise = $this->db->query("select * from product where year='$select_year_product'");
    $row_yearwise = $res_yearwise->result();
    echo json_encode($row_yearwise);         
    exit();
}

客户方：

success : function (data){
  JSON.parse(data).map(d => /* extract the details you want here */ )
  /* Step 4 */
  bar_chart.setData(data);
}

在另一个javascript中使用ajax响应数据

1 个答案: