Implementing Ajax with Zend Framework and Json

Well, while working with ajax, it better to have an xml as response. Xml, however need more coding and parsing on client side than json.
Zend framework provides very easy way to generate json response.
In this article I’m going to discuss how to create Ajax request using prototype and how to use Zend_Json to generate response.
For generating Ajax request, you will need to write

If response is the form of this

[
{"firstName":"Faheem","lastName":"Abbas","username":"fahim","email":"faheem.abbas@example.com"},

{"firstName":"Shazil","lastName":"Hassan","username":"shazil","email":"shazil.hassan@yahoo.com"}
]

Then to acess the values of the first row, write

var firstName = results[0].firstName;
var lastName = results[0].lastName;

and the values of the second row can be accessed as

var firstName = results[1]. firstName;
var lastName = results[1].lastName;

To create Json response, you will need to write the following in your controller action

$users = new Users();
$username = $this->_getParam('username');
$select = $users->select();
$data = $users->fetchAll($select);
$results = $data->toArray();
echo Zend_Json::encode($results);

Keep in mind that “users” is our model, having the following code.

class Users extends Zend_Db_Table
{
    protected $_name = "users";
}

That’s it. cheers.

Ajax with Json and prototype in Zend Framework

I used JSon for the first time in my application today. Zend provide a very easy way to create JSon response.
In this article I would use Prototype to make ajax call. Hopefully you will now a bit about Prototype. Anyway if not, it would not be a hard job to understand it after reading my article.
So let’s get started.
Consider you have the following form.

The scenario is
When user select name from the dropdown, the entire form is filled with the data from the database for that particular user.

For this purpose you would need to have a controller/Action(s), a model and template file.
In your form attach the following attrib to your name element as

$name = $this->createElement('select','name');
$name->addMultioptions(array(
                    'select'=>'[select]',
                    '1' => 'Faheem',
                    '2' => 'Abbas'
));

$name->setAttrib('onchange','AutoFill()');

In the lines above we first create a dropdown give it two values. And then attach javascript function “AutoFill” function using setAttrib method.

In your controller initialize your form and assign it to the view template as

$form = new MyCustomForm();
$this->view->form = $form;

Now in your view template file write the following.
Write the following javascript code.

To get response you will need to create an action and write the following code

class User extends Zend_Controller_Action
{
    public function indexAction()
    {
        $form = new MyCustomForm();
        $this->view->form = $form;
    }

    public function getdataAction()
    {
        $this->_helper->layout()->disableLayout();
        $users = new Users();

        $this->_helper->viewRenderer->setNoRender();
        if ($this->getRequest()->isXmlHttpRequest()) {
            $id = $this->_getParam('id');
            $userData = $ users ->getData($id);
            $dojoData= new Zend_Dojo_Data('id',$userData,'id');
            echo $dojoData->toJson();
        }
    }
}

In the above code getdataAction is called using ajax call. In the first line we have disabled the layout, because we don’t need layout in case of ajax response. Next we create object of our model class(discussed later). Next we tell zend to disable view rendering.
In the next few lines we check for ajax request, get id, call our getData model method.
We then create dojo data object. This object provide a very useful method to convert data retrieved into json format. The method used is toJson().

In our model we have code like the following.

class Users extends Zend_Db_Table
{
    protected $_name = 'users';

    public function getData($id)
    {
        $select = $this->_db->select()
                        ->from($this->_name,
                                    array('address1','address2'….))
                        ->where('id = ?', $id);
        $result = $this->getAdapter()->fetchAll($select);
        return $result;
    }
}

That’s it. Cheers.