5

編集-
以下に回答を投稿しました。

問題は、送信ボタンが押されたときに ZF2 がフォーム データを送信する方法/場所を理解できないことです。
if ($this->getRequest()->isPost()){
そのため、以下の ajax 呼び出しの後 に行うと、データが投稿されていないことがわかります。

上記のisPost()if ステートメントを実行すると、送信ボタンを押したときに完全に機能し、データが投稿されたことを通知し、その後フォーム データが有効であることを通知します。

これがajax呼び出しです-

            <script>
                $.ajax({
                    url: urlform,
                    type: 'POST',
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    async: true,
                    data: ($("#newThoughtForm").serialize() + '&submit=go'),
                    success: function () {
                        console.log('SUBMIT WORKS');
                        setTimeout(function () { <?php echo $this->invokeIndexAction()->test(); ?> ;
                        }, 1000);
                    },
//This keeps getting executed because there is no response, as the controller action is not run on a Post()
                    error: function () {
                        console.log('There is error while submit');
                        setTimeout(function () { <?php echo $this->invokeIndexAction()->test(); ?> ;
                        }, 1000);
                    }
//I assume the data won't get pushed to the server if there is no response,
//but I can't figure out how to give a response in ZF2 since the controller is not
//run when the Post() is made. 
                });

フォームはこちら-

            use Zend\Form\Form;

            class newAlbumForm extends Form
            {
                public function __construct()
                {
                    parent::__construct('newAlbumForm');
                    $this->setAttribute('method', 'post');

                    $this->add(array(
                        'type' => 'AlbumModule\Form\newAlbumFieldset',
                        'options' => array(
                            'use_as_base_fieldset' => true
                        )
                    ));

                    $this->add(array(
                            'name' => 'submit',
                                'attributes' => array(
                                    'type' => 'submit',
                                    'value' => 'go'
                        ),
                    ));
                }
            }



ajax 呼び出しの要求 -

            Request URL:http://test/newAlbum.html
            Request Method:POST
            Status Code:200 OK
            Request Headersview source
            Accept:*/*
            Accept-Encoding:gzip,deflate,sdch
            Accept-Language:en-US,en;q=0.8
            Connection:keep-alive
            Content-Length:46
            Content-Type:application/x-www-form-urlencoded; charset=UTF-8
            Cookie:PHPSESSID=h46r1fmj35d1vu11nua3r49he4
            Host:test
            Origin:http://test
            Referer:http://test/newAlbum.html
            User-Agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36
            X-Requested-With:XMLHttpRequest
            Form Dataview sourceview URL encoded
            album[albumText]:hello world
            submit:go
            Response Headersview source
            Connection:Keep-Alive
            Content-Length:4139
            Content-Type:text/html
            Date:Sun, 20 Oct 2013 16:52:15 GMT
            Keep-Alive:timeout=5, max=99
            Server:Apache/2.4.4 (Win64) PHP/5.4.12
            X-Powered-By:PHP/5.4.12

送信ボタンのリクエスト -

            Request URL:http://test/newAlbum.html
            Request Method:POST
            Status Code:200 OK
            Request Headersview source
            Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
            Accept-Encoding:gzip,deflate,sdch
            Accept-Language:en-US,en;q=0.8
            Connection:keep-alive
            Content-Length:46
            Content-Type:application/x-www-form-urlencoded
            Cookie:PHPSESSID=h46r1fmj35d1vu11nua3r49he4
            Host:test
            Origin:http://test
            Referer:http://test/newAlbum.html
            User-Agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36
            Form Dataview sourceview URL encoded
            album[albumText]:hello world
            submit:go
            Response Headersview source
            Connection:Keep-Alive
            Content-Length:4139
            Content-Type:text/html
            Date:Sun, 20 Oct 2013 16:52:14 GMT
            Keep-Alive:timeout=5, max=100
            Server:Apache/2.4.4 (Win64) PHP/5.4.12
            X-Powered-By:PHP/5.4.12



完全を期すために、コントローラーの indexAction() を次に示します。

            public function indexAction()
            {
                echo 'console.log("Index Action is Called");';

                $form = new \AlbumModule\Form\newAlbumForm();
                if ($this->getRequest()->isPost()){
                    echo 'console.log("Data posted");';

                    $form->setData($this->getRequest()->getPost());
                    if ($form->isValid()){
                        echo 'console.log("Form Valid");';

                        //todo
                        $this->forward()->dispatch('newAlbum', array('action' => 'submitAlbum'));
                        return new ViewModel(
                            array(
                                    'form' => $form
                            )
                        );
                    } else {
                        echo 'console.log("Form Invalid");';

                        return new ViewModel(
                            array(
                                    'form' => $form
                            )
                        );
                    }
                } else {
                    echo 'console.log("No data posted")';
                    return new ViewModel(
                            array(
                                    'form' => $form
                            )
                        );
                }
            }

冒頭で述べたようisPost()に、ボタンがフォームを送信するとクラスは true の値を返しますが、フォームが Ajax 経由で送信されると false の値を返します。

編集-
以下に回答を投稿しました。

4

4 に答える 4

10

通常、ajax からデータを送信する場合、テンプレートを再度レンダリングする必要はありません。それが ViewModel の機能です。

あなたのmodule.config.phpにjson戦略を追加してみてください

'view_manager' => array(
    //other configuration
    'strategies' => array(
        'ViewJsonStrategy',
    ),
),

次に、アクションは次のようになります。

public function ajaxAction()
{
    $request = $this->getRequest();

    if ($request->isXmlHttpRequest()){ // If it's ajax call
        $data = $request->getPost('data'));
        ...
    }


    return new JsonModel($formData);
}
于 2013-10-21T10:16:34.510 に答える
4

SzymonM のおかげで、これを理解することができました。

基本的に、タイプjsonとしてアクションに投稿する必要があるようです。これは、投稿先のコントローラー/アクションが何であれ、jquery ajax 呼び出しが成功を返すために「成功」​​応答を返す必要があることを意味します。 そのため、index アクションに投稿しようとすると、多くの if ステートメントを介して viewModel オブジェクトまたは json 応答を 返そするため
、問題が発生します。最良のオプションは、json リクエストを、リクエストとレスポンスを管理する別のアクションにポストすることです。

アヤックスアクション -

public function ajaxAction()
{
    $form       = new \AlbumModule\Form\newAlbumForm();
    $request    = $this->getRequest();
    $response   = $this->getResponse();

    if ($request->isPost()) {
        //$hello is a test variable used for checking if the form is valid
        //by checking the response
        $hello = 1;
        $form->setData($request->getPost());
        if ($form->isValid()){
            $hello = 4020;
        };
    }

    $messages = array();

    if (!empty($messages)){       
        $response->setContent(\Zend\Json\Json::encode($messages));
    } else {
        $response->setContent(\Zend\Json\Json::encode(array('success'=>1,'hello'=>$hello)));
    }

        return $response;
}


Ajax コール -

var urlform = '<?php echo $this->url('AlbumModule\newAlbum\home', array('controller'=>'newAlbum', 'action'=>'ajax')); ?>';

$.ajax({
    url: urlform,
    type: 'POST',
    dataType: 'json',
    async: true,
    data: $("#newAlbumForm").serialize(),
    success: function (data) {
        console.log(data);
    }
    error: function (data) {
        console.log(data);
    }
});
于 2013-10-21T18:16:55.330 に答える
0

最良のアプローチは、

AcceptableViewModelSelector

異なる戦略を切り替えるコントローラープラグイン

最初に module.config.php に

 return [
     'view_manager'=>[
       'Strategies'=> 'ViewJsonStrategy',     
     ]
 ]

コントローラの例: indexAction の IndexController.php

class IndexController extends AbstarctActionController{

        protected $accptCretiria = [
          'Zend\View\Model\ViewModel'=>'text/html',
          'Zend\View\Model\JsonModel'=>'application/json, text/json'
        ];

        public function indexAction(){
            //here if is ajax call it returns jsonView ,and if is normal call it return ViewModel
            $viewModel =  $this->acceptableViewModelSelector($this->acceptCretiria);

        return $viewModel
        }
    }
于 2015-09-22T12:07:25.483 に答える
-1

WasabiLib と呼ばれる Zend Framework 2 用のモジュールがあります。非常に便利な方法で ajax リクエストとレスポンスを管理するためのほとんどすべてが搭載されています。簡単なフォームを提供するホームページの簡単な例を見てください。

//inside the phtml
<form id="simpleForm" class="ajax_element" action="simpleFormExample" method="POST"
    data-ajax-loader="myLoader">

    <input type="text" name="written_text">
    <input type="submit" value="try it">
    <i id="myLoader" class="fa fa-spinner fa-pulse fa-lg" style="display: none;"></i>
</form>


//Server-side code
public function simpleFormExampleAction(){
    $postArray = $this->getRequest()->getPost();
    $input = $postArray['written_text'];
    $response = new Response(new InnerHtml("#element_simple_form","Server Response: ".$input));

    return $this->getResponse()->setContent($response);
}
于 2015-10-15T07:40:42.880 に答える