如何在Magento 2模塊中使用Ajax調用呈現HTML

在上一篇文章中，我們使用ajax顯示了表單成功操作消息。在那篇文章中，我們僅返回了來自控制器的特定消息，並將其顯示在前端。
	有時您需要返回整個HTML並使用Ajax將其顯示在前端。今天，我們將看到如何在Magento 2模塊中使用Ajax調用呈現HTML。

Magento 2提供了一個Magento\Framework\Controller\Result\JsonFactory可用於從控制器返回JSON響應的類。
	我們將使用此類的工廠方法以json格式返回HTML。

創建PHTML文件
在我們要初始化ajax調用的位置下創建一個PHTML文件index.phtmlapp/code/Codextblog/Custom/view/frontend/templates。

<div id="ajaxresponse"></div>
<?php
$ajaxurl = $block->getAjaxUrl();
?>
<script type="text/x-magento-init">
        {
            "*": {
                "Codextblog_Custom/js/custom": {
                    "AjaxUrl": "<?php echo $ajaxurl; ?>",
                    "CurrentProduct": "<?php echo $currentProductId; ?>",
                }
            }
        }
</script>

在此文件中，我們創建了一個ID為#ajaxresponse的空白div。使用ajax調用，我們將調用控制器文件並返回HTML。
	使用JQUERY，我們會將HTML填充到div中。

在script標籤下，我們將兩個參數傳遞給我們的js文件。首先是AjaxUrl，它是控制器的URL
	（在我們的示例中是custom / index / view /，自定義是模塊的前名，而view.php是我們的控制器文件），
	我們將從中返回JSON響應，第二個是CurrentProduct，它是產品ID。您可以在此調用中傳遞任何其他參數。
	出於演示目的，我們將產品ID傳遞給CurrentProduct參數。


創建JS文件
在目錄下創建一個JS文件custom.jsapp/code/Codextblog/Custom/view/frontend/web/js並輸入以下代碼。

define([
    "jquery",
    "jquery/ui"
], function($){
    "use strict";
 
    function main(config, element) {
        var $element = $(element);
        var AjaxUrl = config.AjaxUrl;
        var CurrentProduct = config.CurrentProduct;
         
        $(document).ready(function(){
            setTimeout(function(){
                $.ajax({
                    context: '#ajaxresponse',
                    url: AjaxUrl,
                    type: "POST",
                    data: {currentproduct:CurrentProduct},
                }).done(function (data) {
                    $('#ajaxresponse').html(data.output);
                    return true;
                });
            },2000);
        });
 
    };
    return main;
});

您可以看到，在done方法中，我們正在使用data.output填充div內容，其中包含實際的HTML。

創建控制器文件
在目錄下創建一個控制器文件View.phpapp/code/Codextblog/Custom/Controller/Index並編寫以下代碼

<?php
namespace Codextblog\Custom\Controller\Index;
 
 
use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\Controller\Result\JsonFactory;
use Magento\Framework\View\Result\PageFactory;
 
 
class View extends Action
{
 
    /**
     * @var PageFactory
     */
    protected $_resultPageFactory;
 
    /**
     * @var JsonFactory
     */
    protected $_resultJsonFactory;
 
 
    /**
     * View constructor.
     * @param Context $context
     * @param PageFactory $resultPageFactory
     * @param JsonFactory $resultJsonFactory
     */
    public function __construct(Context $context, PageFactory $resultPageFactory, JsonFactory $resultJsonFactory)
    {
 
        $this->_resultPageFactory = $resultPageFactory;
        $this->_resultJsonFactory = $resultJsonFactory;
 
        parent::__construct($context);
    }
 
 
    /**
     * @return \Magento\Framework\Controller\Result\Json
     */
    public function execute()
    {
        $result = $this->_resultJsonFactory->create();
        $resultPage = $this->_resultPageFactory->create();
        $currentProductId = $this->getRequest()->getParam('currentproduct');
        
 
        $data = array('currentproductid'=>$currentProductId);
 
        $block = $resultPage->getLayout()
                ->createBlock('Codextblog\Custom\Block\Index\View')
                ->setTemplate('Codextblog_Custom::view.phtml')
                ->setData('data',$data)
                ->toHtml();
 
        $result->setData(['output' => $block]);
        return $result;
    }
 
}

您可以在行號中看到。在圖54和55中，我們傳遞了塊文件和模板文件，分別在其中編寫業務邏輯和HTML代碼。
	我們已經在setData方法中傳遞了currentproductid，以便它在塊文件中可用於任何業務邏輯。
	在第59行中，我們正在準備JSON輸出的setData方法中設置數據。



創建阻止文件
在目錄下創建View.phpapp/code/Codextblog/Custom/Block/Index並編寫以下代碼

<?php
namespace Codextblog\Custom\Block\Index;
 
use Magento\Framework\View\Element\Template;
 
class View extends Template
{
  public function __construct(Template\Context $context, array $data = [])
    {
        parent::__construct($context, $data);
    }
 
  protected function _prepareLayout()
    {
        return parent::_prepareLayout(); // TODO: Change the autogenerated stub
    }
 
  public function getProducts($productId)
  {
     ---------------ANY BUSINESS LOGIC---------
     return;
  }
}


創建模板文件
app/code/Codextblog/Custom/view/frontend/templates使用您的HTML代碼在目錄下創建view.phtml文件。

<?php
$productData = $block->getData();
$productId = $productData['data']['currentproductid'];
$products = $block->getProducts($productId);
?>
<div>
  <div>YOUR HTML</div>
</div> 

您可以在此處看到currentproductid在我們的模板文件中可用。使用該變量，我們可以從塊文件中獲取任何業務邏輯，並在模板文件中呈現HTML代碼。
 
希望本AJAX教程對您的項目有所幫助。請在Facebook上喜歡我們並在Twitter上關注我們。