zend-framework2 - ZF 2 使用 Ajax 提交表单

Question

我在ZF2中搜索了很长时间的ajax表单示例，但没有明确的教程，如果有人可以帮助我，我会考虑的。我正在尝试使用 ajax 调用控件的操作

Answer 1

**my view**
$form = $formComment;
)
 $form->setAttribute( 'action', '#');
?>
<h4>Leave comment</h4>
<?=$this->form()->openTag( $form )?>
<dl class="zend_form">
    <?=$this->formInput ( $form->get( 'id' ) )?>

    <div>

    <?=$this->formLabel ( $form->get ( 'name' ) )?>
        <?=$this->formInput ( $form->get ( 'name' ) )?>
        <?=$this->formElementErrors ( $form->get ( 'name' ) )?>
        <div id="nameInfo">Please enter your name?</div>
    </div>

    <div><?=$this->formLabel ( $form->get ( 'email' ) )?>
        <?=$this->formInput ( $form->get ( 'email' ) )?>
        <?=$this->formElementErrors ( $form->get ( 'email' ) )?>
        <div id="emailInfo">Valid E-mail please, you will need it to log
    in!</div>
    </div>

    <div><?=$this->formLabel ( $form->get ( 'site' ) )?>

        <?=$this->formInput ( $form->get ( 'site' ) )?>
        <?=$this->formElementErrors ( $form->get ( 'site' ) )?>
    </div>

    <div><?=$this->formLabel ( $form->get ( 'comment' ) )?>
        <?=$this->formTextarea ( $form->get ( 'comment' ) )?>
        <?=$this->formElementErrors ( $form->get ( 'comment' ) )?>
    </div>
    <div>
        <?=$this->formInput ( $form->get ( 'submit' ) )?>
        <?=$this->formElementErrors ( $form->get ( 'submit' ) )?>
    </div>
</dl>
<?=$this->form ()->closeTag ( $form )?>

Answer 2

zend 框架根据布局模板渲染（输出）HTML，您可以假设每个操作内容都是片段，而不是包含在布局中。

所以说要获得 AJAX 响应，只需禁用 AJAX 调用的布局，这看起来很简单呀，好的

所以现在我们在哪里添加布局禁用代码，您可以在调用任何操作之前执行此操作，包括在应用程序 Module.php 中包含此代码，我们正在附加一个事件以检查调用是否来自 AJAX

public function onBootstrap(EventInterface $e){
    $eventManager = $e->getApplication()->getEventManager();
    $eventManager->attach('dispatch', array($this, 'disableLayout'), 100);  
    $moduleRouteListener = new ModuleRouteListener();
    $moduleRouteListener->attach($eventManager);
}

在同一个Module.php下添加一个函数

public function disableLayout(EventInterface $event){
    $result = $event->getResult();
    if ($result instanceof \Zend\View\Model\ViewModel) {
        $result->setTerminal($event->getRequest()->isXmlHttpRequest());
        //setTerminal(true) disable the layout
    }
}

这是一种方法，还有更多方法，如果您不想为所有请求禁用布局，您可以简单地设置 setTerminal(true) 以获取任何需要由 ajax 调用的当前视图模型请求，这只是一个有助于朝着正确方向前进的示例

Answer 3

我的动作代码 public function indexAction() { //$this->layout ( 'layout/pages' );

    $this -> id = ( int )$this -> getEvent() -> getRouteMatch() -> getParam('id');
    $this -> id_branche = ( int )$this -> getEvent() -> getRouteMatch() -> getParam('id_branche');
    $this -> form = new CommentForm();
    $this -> form -> get('submit') -> setAttribute('label', 'Add');
    $request = $this -> getRequest();
    //verifie le type de la requete
    if ($request -> isPost()) {
        $user = new user();
        $comment = new comment();
        $blog = new blog();
        print 'j';
        //Initialisation du formulaire e partir des donnees reues
        $this -> form -> setData($request -> getPost());

        //$this->form->setData($request->getQuery());
        //Ajout des filtres de validation base sur l'objet user,comment
        print '2';
        //$form->setInputFilter($user->getInputFilter());
        //Contrele les champs
        if ($this -> form -> isValid()) {
            print '3';
            $user -> exchangeArray($this -> form -> getData());
            $comment -> exchangeArray($this -> form -> getData());
            print '4';
            $validname = $this->checkuser($this->form->getValue('email'));
            if($validname){
            $this -> getUserTable() -> saveUser($user);}
            else{print 'exist';}
            print '5';
            $lastUserId = $this -> getUserTable() -> getAdapter() -> getDriver() -> getLastGeneratedValue('id');
            $this -> getCommentTable() -> addComment($comment, $lastUserId, $this -> id);
            return $this->redirect ()->toRoute ( '#Blog', array ('controller' => 'index',) );
        } else {
            print 'not set';
        }
    } else {

        $viewm = new ViewModel( array('blog' => $this -> getBlogTable() -> getBlog($this -> id, $this -> id_branche), 'comment' => $this -> getCommentTable() -> fetchJoin($this -> id), 'id' => $this -> id, 'id_branche' => $this -> id_branche, 'formComment' => $this -> form, ));
        $viewm -> setTerminal(true);
        return $viewm;

    }

}

Answer 4

这有什么问题？只需使用一些 js 库来发送 ajax 请求并相应地解析响应。如果您已正确设置路由，则可以调用任何控制器操作。就像您访问普通网址一样。您可以根据您的要求发回 JSON 响应或 HTML 响应。