magento - 模块和ajax调用

Question

我正在尝试创建对自定义 Controller 的 ajax 调用。

我一直在关注:http://www.atwix.com/magento/ajax-requests-in-magento/ - 它给出了一个如何创建的简短示例。

所以我有以下文件:
app/etc/moudles/BM_Sidebar.xml

<?xml version="1.0"?>
<config>
  <modules>
    <BM_Sidebar>
        <active>true</active>
        <codePool>local</codePool>
    </BM_Sidebar>
  </modules>
</config>

app/code/local/BM/Sidebar/controllers/IndexController.php

class BM_Sidebar_IndexController extends Mage_Core_Controller_Front_Action {

    public function indexAction() {
        echo "test data";
    }
}

app/code/local/BM/Sidebar/controllers/etc/config.xml

<?xml version="1.0"?>
<config>
  <modules>
    <BM_Sidebar>
      <version>0.1.0</version>
    </BM_Sidebar>
  </modules>
  <frontend>
    <routers>
      <sidebar>
        <use>standard</use>
        <args>
          <module>BM_Sidebar</module>
          <frontName>carfilter</frontName>
        </args>
      </sidebar>
    </routers>
    <layout>
      <updates>
        <sidebar>
          <file>sidebar.xml</file>
        </sidebar>
      </updates>
    </layout>
  </frontend>
</config>

我正在努力找出我需要放入 sidebar.xml 的确切内容

我需要创建一个 block 类吗？

谢谢

Answer 1

如何进行 AJAX

它总是从 config.xml 开始:

声明您的路由器:使用与 frontName 的内容相同的路由器名称标签

<frontend>
    <routers>
        <carfilter>
            <use>standard</use>
            <args>
                <module>BM_Sidebar</module>
                <frontName>carfilter</frontName>
            </args>
        </carfilter>
    </routers>
</frontend>

声明你的布局文件(你这样做了)

在您的布局文件中，您需要 2 个句柄:1 个用于初始化状态，一个用于 ajax。句柄与您正在使用的 url 匹配:

<layout version="0.1.0">
    <carfilter_ajax_index>
        <reference name="head">
            <action method="addItem"><type>skin_js</type><name>js/carfilter.js</name></action>
        </reference>
        <reference name="content">
            <block type="core/template" name="carfilter" as="carfilter" template="carfilter/init.phtml" />
        </reference>
    </carfilter_ajax_index>

    <carfilter_ajax_ajax>
        <remove name="right"/>
        <remove name="left"/>
        <block type="core/template" name="carfilter_ajax" as="carfilter_ajax" template="carfilter/ajax.phtml" output="toHtml" />
    </carfilter_ajax_ajax>
</layout>

注意 : 关注output AJAX 调用的 block 声明中的属性

创建您的 phtml 文件(您在布局文件中声明的文件):

init.phtml:创建将使用 AJAX 的结果更新的 div 并启动 javascript 对象

first state
<div id="div-to-update"></div>
<script type="text/javascript">
//<![CDATA[
    new Carfilter('<?php echo $this->getUrl('carfilter/ajax/ajax') ?>', 'div-to-update');
//]]>
</script>

ajax.phtml:要使用 AJAX 显示的 html

var Carfilter = Class.create();
Carfilter.prototype = {
    initialize: function(ajaxCallUrl, divToUpdate) {
        this.url = ajaxCallUrl;
        this.div = divToUpdate;
        this.makeAjaxCall();
    },

    makeAjaxCall: function() {
        new Ajax.Request(this.url, {
            onSuccess: function(transport) {
                var response = transport.responseText.evalJSON();
                $(this.div).update(response.outputHtml);
            }.bind(this)
        });
    }
};

Controller :本例中的 2 个 Action ，页面加载时的索引，以及 ajax:

<?php

class BM_Sidebar_AjaxController extends Mage_Core_Controller_Front_Action
{

    public function indexAction()
    {
        $this->loadLayout();
        $this->_initLayoutMessages('customer/session');
        $this->getLayout()->getBlock('head')->setTitle($this->__('Page title'));
        $this->renderLayout();
    }

    public function ajaxAction()
    {
        $isAjax = Mage::app()->getRequest()->isAjax();
        if ($isAjax) {
            $layout = $this->getLayout();
            $update = $layout->getUpdate();
            $update->load('carfilter_ajax_ajax'); //load the layout you defined in layout xml file
            $layout->generateXml();
            $layout->generateBlocks();
            $output = $layout->getOutput();
            $this->getResponse()->setHeader('Content-type', 'application/json');
            $this->getResponse()->setBody(Mage::helper('core')->jsonEncode(array('outputHtml' => $output)));
        }
    }

}

为了回答您的问题，您不一定需要创建自己的 block (在我的示例中我没有)，但您可能希望将模板文件中所需的功能放在方便的地方