Zend Framework - Ajax

AJAX è una moderna tecnologia nella programmazione web. Fornisce opzioni per inviare e ricevere dati in una pagina Web in modo asincrono, senza aggiornare la pagina. Il framework Zend offre un'opzione per lavorare conjson modello attraverso zend-view e zend-jsoncomponente. Impariamo la programmazione Zend AJAX in questo capitolo.

Installa il componente JSON

Il componente Zend json può essere installato utilizzando il Composer comando come specificato di seguito -

composer require zendframework/zend-json

Concetto

Il framework Zend fornisce due metodi per scrivere facilmente un'applicazione web abilitata per AJAX. Sono i seguenti:

Il isXmlHttpRequest() metodo in Requestoggetto - Se viene effettuata una richiesta AJAX, il metodo isXmlHttpRequest () dell'oggetto richiesta restituisce true, altrimenti false. Questo metodo viene utilizzato per gestire correttamente una richiesta AJAX sul lato server.

if ($request->isXmlHttpRequest()) { 
   // Ajax request 
} else { 
   // Normal request 
}

Zend / View / Model / JsonModel - The JsonModel è un'alternativa per ViewModelda utilizzare esclusivamente per gli scenari AJAX e API REST. Il JsonModel insieme aJsonStrategy (da configurare nel blocco view manager del modulo) codifica i dati del modello in Json e lo restituisce come risposta invece di visualizzazioni (phtml).

AJAX - Esempio di lavoro

Aggiungiamo una nuova pagina ajax, ajaxnel modulo tutorial e recupera le informazioni sul libro in modo asincrono. Per fare ciò, dobbiamo attenerci ai seguenti passaggi.

Passaggio 1: aggiungere JsonStrategy nella configurazione del modulo

Aggiorna il blocco del gestore di visualizzazione nel file di configurazione del modulo tutorial - myapp / module / Tutorial / config / module.config.php. Poi,JsonStrategy lavorerà con JsonModel per codificare e inviare i dati json.

'view_manager' => [ 
   'template_map' => array
      ('layout/layout' => __DIR__ . '/../view/layout/newlayout.phtml'), 
   'template_path_stack' => [ 
      'tutorial' => __DIR__ . '/../view', 
   ], 
   'strategies' => array('ViewJsonStrategy',), 
],

Passaggio 2: aggiungi il metodo ajaxAction in TutorialController.php

Aggiungi il metodo ajaxAction in TutorialController.php con il codice seguente:

public function ajaxAction() { 
   $data = $this->bookTable->fetchAll(); $request = $this->getRequest(); $query = $request->getQuery(); if ($request->isXmlHttpRequest() || $query->get('showJson') == 1) { $jsonData = array(); 
      $idx = 0; foreach($data as $sampledata) { $temp = array( 
            'author' => $sampledata->author, 'title' => $sampledata->title, 
            'imagepath' => $sampledata->imagepath ); $jsonData[$idx++] = $temp; 
      } 
      $view = new JsonModel($jsonData); 
      $view->setTerminal(true); } else { $view = new ViewModel(); 
   }  
   return $view; 
}

Qui, ajaxAction controllerà se la richiesta in arrivo è AJAX o meno. Se la richiesta in arrivo è AJAX, il fileJsonModelsarà creato. Altrimenti, normaleViewModel sarà creato.

In entrambi i casi, le informazioni sul libro verranno recuperate dal database e popolate nel modello. Se il modello è un JsonModel, alloraJsonStrategy verrà richiamato e codificherà i dati come json e restituirà come risposta.

Il $query->get('showJson') == 1viene utilizzato per scopi di debug. Basta aggiungereshowJson=1 nell'URL e la pagina mostrerà i dati json.

Passaggio 3: aggiungi ajax.phtml

Ora aggiungi lo script di visualizzazione ajax.phtmlper il metodo ajaxAction. Questa pagina avrà un collegamento con l'etichetta -Load book information.

Facendo clic su quel collegamento verrà eseguita una richiesta AJAX, che recupererà le informazioni sul libro come dati Json e mostrerà le informazioni sul libro come una tabella formattata. L'elaborazione AJAX viene eseguita utilizzando ilJQuery.

L'elenco completo del codice è il seguente:

<a id = "loadbook" href = "#">Load book information</a> 
</br> </br> 

<table class = "table"> 
   <tbody id = "book"> 
   </tbody> 
</table>  

<script language = "javascript"> 
$(document).ready(function(){ $("#loadbook").on("click", function(event){ 
      $.ajax({ url: '/tutorial/ajax', type: 'POST', dataType: 'json', async: true, success: function(data, status) { var e = $('<tr><th>Author</th><th>Title</th><th>Picture</th></tr>'); 
            $('#book').html(''); $('#book').append(e); 
            
            for(i = 0; i < data.length; i++) { 
               book = data[i]; 
               var e = $('<tr><td id = "author"></td><td id = "title"></td> <td id="imagepath"><img src = ""/></td></tr>'); $('#author', e).html(book['author']); 
               $('#title', e).html(book['title']); $('#imagepath img', e).attr('src', book['imagepath']); 
               $('#book').append(e); 
            } 
         }, 
         error : function(xhr, textStatus, errorThrown) { 
            alert('Ajax request failed.'); 
         } 
      }); 
   }); 
}); 
</script>

Passaggio 4: eseguire l'applicazione

Infine, esegui l'applicazione - http://localhost:8080/tutorial/ajax e fare clic sul collegamento Carica informazioni sul libro.

Il risultato sarà come mostrato di seguito -

Ajax Page -

Ajax Page with Book Information

Ajax page with debugging information

↰ Previous page Next page ↱