我如何從控制器在magento 2中獲得ajax響應

Question

我嘗試進行ajax調用，並將控制器中的下拉值傳遞給視圖文件並獲取特定的相關訂單信息。響應成真，但如何在我的視圖文件中使用該響應。

這裏是我的PHTML文件：

<select id="chartOption"> 
    <option value="">Select Option</option> 
    <option value="status">Status</option> 
    <option value="payments">Payments</option> 
    <option value="browser">Browser</option> 
</select> 
<input type="button" name="chart_button" value="Generate chart" onclick="click_chart()"> 
<div id="result"></div> 
<script type="text/javascript"> 
     function click_chart() { 
      var a = document.getElementById("chartOption"); 
      var abc = a.options[a.selectedIndex].value; 
      data = jQuery(this).serialize(); 
      jQuery.ajax({ 
       type: "POST", 
       dataType: "json", 
       contentType: "application/json", 
       url: "Blog/Post/Information", 
       data: "label=" + abc, 
       success: function (result) { jQuery('#result').html(result); }, 
       error: function (error) { jQuery('#result').html(error); } 
      }); 
     } 
</script> 

這裏是我的控制器：

public function execute() { 
    if (isset($_REQUEST['ajax'])) { 
     $label = $this->getRequest()->getPost('label'); 
     $_orders = $this->getOrders(); 
     $complete = $pending = $closed = $canceled = $processing = $onHold = 0; 
     foreach ($_orders as $_order): 
      $label = $_order->getStatusLabel(); 
      if ($label == 'Complete') { 
       $complete++; 
      } 
      if ($label == 'Pending') { 
       $pending++; 
      } 
      if ($label == 'Closed') { 
       $closed++; 
      } 
      if ($label == 'Canceled') { 
       $canceled++; 
      } 
      if ($label == 'Processing') { 
       $processing++; 
      } 
      if ($label == 'On Hold') { 
       $onHold++; 
      } 
     endforeach; 
     $orderData = "['Task', 'Hours per Day'],['Complete'," . $complete . "],['Pending'," . $pending . "]],['Processing'," . $processing . "]],['Canceled'," . $canceled . "]"; 
     $arr = array('result' => $orderData); 
     $jsonData = json_encode(array($arr)); 
     $this->getResponse()->setHeader('Content-type', 'application/json'); 
     $this->getResponse()->setBody($jsonData); 
    } 
} 

Answer 1

下面

是如何做到這一點的例子，請根據您的要求修改。

我爲此使用了js模板。

以下示例將在您的phtml文件中創建下拉菜單。您可以使用相同的方法以您想要的格式顯示數據。

在您的JS

define([ 
     'jquery', 
     'underscore', 
     'mage/template', 
     'jquery/list-filter' 
     ], function (
      $, 
      _, 
      template 
     ) { 
      function main(config, element) { 
       var $element = $(element); 
       $(document).on('click','yourID_Or_Class',function() { 
         var param = 'ajax=1'; 
          $.ajax({ 
           showLoader: true, 
           url: YOUR_URL_HERE, 
           data: param, 
           type: "POST", 
           dataType: 'json' 
          }).done(function (data) { 
           $('#test').removeClass('hideme'); 
           var html = template('#test', {posts:data}); 
           $('#test').html(html); 
          }); 
        }); 
      }; 
     return main; 
    }); 

在控制器

public function __construct(
     Context            $context, 
     \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory, 
    ) { 

     $this->resultJsonFactory   = $resultJsonFactory; 
     parent::__construct($context); 
    } 


    public function execute() 
    { 
     $result     = $this->resultJsonFactory->create(); 
     if ($this->getRequest()->isAjax()) 
     { 
      $test=Array 
      (
       'Firstname' => 'What is your firstname', 
       'Email' => 'What is your emailId', 
       'Lastname' => 'What is your lastname', 
       'Country' => 'Your Country' 
      ); 
      return $result->setData($test); 
     } 
    } 

您PHTML文件

<style> 
.hideme{display:none;} 
</style> 
<div id='test' class="hideme"> 
    <select> 
    <% _.each(posts, function(text,value) { %> 
     <option value="<%= value %>"><%= text %></option> 
    <% }) %> 
    </select> 
</div> 

希望有所幫助。