如何在Zend Framework 2中使用ajax？

I am trying a small ajax application whereby I only want to return a hello world string from my controller action. it is returning the Hello world but along with this, it is also returning my template file.. I tried to disable it the templating using the following code in the action of my controlelr

$this->_helper->layout()->disableLayout();
$this->_helper->viewRenderer->setNoRender( true );

but this returns me this error

SCREAM: Error suppression ignored for
( ! ) Notice: Undefined property: Survey\Controller\SurveyController::$_helper in C:\wamp\www\zend\module\Survey\src\Survey\Controller\SurveyController.php on line 55

SCREAM: Error suppression ignored for
( ! ) Fatal error: Call to a member function layout() on a non-object in C:\wamp\www\zend\module\Survey\src\Survey\Controller\SurveyController.php on line 55
Call Stack

How do I fix this ?

EDIT

I modifed the controller such that it looks like this

public function registerAction()
{
    $result = new JsonModel(array(
        'some_parameter' => 'some value',
        'success'=>true,
    ));

    return( $result );
}

Added strategies in the module..module.config in module appl directory

'strategies' => array(
    'ViewJsonStrategy',
),

Still, in the ajax response I get the template being returned

Here's a solid example:

http://akrabat.com/zend-framework-2/returning-json-from-a-zf2-controller-action/

You should be using JsonMoodels to send back a Json Response.

This works for me:

public function ajaxAction(){
    $data = array(
        'var1' => 'var1Value',
        'var2' => 'var2Value',
    );

    $response = $this->getResponse();
    $response->setStatusCode(200);
    $response->setContent(json_encode($data));

    $headers = $response->getHeaders();
    $headers->addHeaderLine('Content-Type', 'application/json');

    return $response;
}

Output:

{"var1":"var1Value","var2":"var2Value"}

i use this in my controller:

    $view = new ViewModel(array('form'=>$my_form));
    //disable layout if request by ajax
    $view->setTerminal($request->isXmlHttpRequest());
    $view->setTemplate('path/to/phtml');
    return $view;

The user wanted to know how to get just the html back, not json as Andrews reply offers.

I also wanted the html returned so i could use it with jquery qtip plugin and this is how i did it. I also had to make the page degrade gracefully in case javascript failed, e.g. the page output should render properly in the layout template.

    /**
 * Tourist Summary action
 *
 * @return ViewModel
 */
public function touristSummaryAction()
{
    // Get the Id 
    $id = $this->params()->fromRoute('id', '');

    // Get the data from somewhere
    $data = array() ;

    // Get the html from the phtml
    $view = new ViewModel(
        array(
            'id' => $id ,
            'data' => $data ,
        )
    );

    //disable layout if request by ajax
    $view->setTerminal($this->getRequest()->isXmlHttpRequest());
    return $view;

}

Take a look at this module. www.wasabilib.org Seems that you it manages ajax very well.

If you do not have a application you can use the Wasabilib Skeleton https://github.com/WasabiLib/wasabilib_zf2_skeleton_application. It comes with all necessary assets in the right place.

If you already have an application you should clone the module: https://github.com/WasabiLib/wasabilib

Minimal requirements: jQuery, ZF2

  1. Add the module to application.config.php.
  2. Include the wasabilib.min.js after jquery in the head of your layout.phtml

How it works in your .phtml-file you have a form like this:

<form id="simpleForm" class="ajax_element" action="simpleFormExample" method="POST">
<input type="text" name="written_text">
<input type="submit" value="try it">
</form>

Anywhere else in your phtml you can place an element where the response is shown.

In your Controller the following method:

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);
}

The form has a class "ajax_element" this will say the the library that the request will be done with an xmlhttp-request. It wont work if you do not give an id to the requesting element. So the form has the ID "simpleForm". The action is the "path/to/controller" just like a normal request.

In the controller action a new WasabiLib\Ajax\Response object is instanciated. The InnerHtml class is for replace, prepend and append html or normal text to a selector. In this case the selector is an ID "element_simple_form". The first parameter of the InnerHtml class is the selector. Make sure that you write #yourElementId or .yourClassSelector. For IDs an "#" and for class selectors "."

The second parameter is the Text you want to fill in this element.

The response object can handle a lot more responses which you can add with

$response->add($anotherResponseType);

A list of possible response types is here: http://www.wasabilib.org/application/pages/components

The module is build to handle ajax request an responses in a very simple way. Once you have understood the behavior you can handle almost every practical ajax need.

The most simple way to send ajax requests and handle responses is the zf2 module WasabiLib https://github.com/WasabiLib/wasabilib_zf2_skeleton_application

You only need to add "ajax_element" to the class-attribute to the element which you want to cause the ajax request. It does not matter if it is a form submit or a link or a button. Visit the examples page http://www.wasabilib.org/application/pages/examples If your application does a lot of ajax I recommend this module.