Verwenden Sie Ajax Antwortdaten in einem anderen Javascript

Question

Ich möchte Ajax Antwortdaten in einem anderen Javascript verwenden.

AJAX In Ansicht (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> 

Obige ist der Ajax-Aufruf hier in ich habe Produkt yearwise zur Auswahl Datenbank es funktioniert gut. Ich habe Antwort in Alert (Daten) in Ajax-Antwort. Unten ist der Code meines Controllers, von hier habe ich das Ergebnis.

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(); 
    } 
} 

Jetzt

Ich mag diese reponse in einem anderen Javascript verwenden, die in der gleichen Ansicht ist wo ich den Ajax-Skript schreiben.

Das Skript, in dem ich die Ajax-Antwort möchte, wird unten erläutert. Dieses Skript ist für dynamische Graphen Ich muss die Werte übergeben, die ich in Array von AJAX-Antwort für jede Schleife erhalten habe.

<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> 

EDIT mit AJAX Antwort:

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 
     ) 

) 

Hier ist x-Achse i Produktnamen möchten und in y-Achse möchte ich total_order_income.

Answer 1

1. Erstellen Sie das Balkendiagramm. Morris.Bar(options) gibt das Balkendiagrammobjekt für die zukünftige Verwendung zurück. Stellen Sie daher sicher, dass eine Referenz darauf gespeichert wird. (um die Daten zu aktualisieren)
2. Schließen Sie das Jahr ändern Ereignis, so dass Sie Ihre AJAX-Anfrage. Wenn Sie dies nach dem Erstellen des Balkendiagramms und innerhalb desselben Bereichs tun, können Sie das Diagramm verwenden, ohne eine globale Variable dafür zu erstellen. (yay for closures)
3. Im AJAX-Erfolgsrückruf verarbeiten Sie die Daten, um sie in das richtige Format zu konvertieren.

4. Rufen Sie im AJAX-Rückruf noch chart.setData(data) auf, um das Diagramm zu aktualisieren.

   /* 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); 
       } 
       });       
   }); 
   

Wenn Sie Hilfe mit Schritt 3 benötigt dann werde ich gerne einige Hinweise geben, aber es wäre hilfreich, einige Beispielantworten von der AJAX Anfrage.

Edit: JSON Codieren der Daten vor dem Versenden es mehr Sinn macht als Parsen der print_r Ausgabe:

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(); 
} 

Client-Seite:

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