Zend Framework - Ajax

AJAX adalah teknologi modern dalam pemrograman web. Ini memberikan opsi untuk mengirim dan menerima data di halaman web secara asinkron, tanpa menyegarkan halaman. Zend framework menyediakan opsi untuk bekerja dengan filejson model melalui zend-view dan zend-jsonkomponen. Mari kita pelajari pemrograman Zend AJAX di bab ini.

Instal komponen json

Komponen Zend json dapat diinstal menggunakan Composer perintah seperti yang ditentukan di bawah ini -

composer require zendframework/zend-json

Konsep

Zend framework menyediakan dua metode untuk menulis aplikasi web AJAX dengan mudah. Mereka adalah sebagai berikut -

Itu isXmlHttpRequest() metode di Requestobjek - Jika permintaan AJAX dibuat, metode isXmlHttpRequest () objek permintaan akan mengembalikan nilai benar, jika tidak salah. Metode ini digunakan untuk menangani permintaan AJAX dengan benar di sisi server.

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

The Zend / View / Model / JsonModel - The JsonModel adalah alternatif untuk ViewModeluntuk digunakan secara eksklusif untuk skenario AJAX dan REST API. JsonModel bersama denganJsonStrategy (untuk dikonfigurasi dalam blok manajer tampilan modul) mengkodekan data model ke Json dan mengembalikannya sebagai respons alih-alih tampilan (phtml).

AJAX - Contoh Kerja

Mari kita tambahkan halaman ajax baru, ajaxdalam modul tutorial dan mengambil informasi buku secara asinkron. Untuk melakukan ini, kita harus mengikuti langkah-langkah berikut.

Langkah 1: Tambahkan JsonStrategy dalam konfigurasi modul

Perbarui blok manajer tampilan di file konfigurasi modul tutorial - myapp / module / Tutorial / config / module.config.php. Kemudian,JsonStrategy akan bekerja dengan JsonModel untuk menyandikan dan mengirim data json.

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

Langkah 2: Tambahkan metode ajaxAction di TutorialController.php

Tambahkan metode ajaxAction di TutorialController.php dengan kode berikut -

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

Di sini, ajaxAction akan memeriksa apakah permintaan yang masuk adalah AJAX atau tidak. Jika permintaan masuk adalah AJAX, maka fileJsonModelakan dibuat. Jika tidak, normalViewModel akan dibuat.

Dalam kedua kasus tersebut, informasi buku akan diambil dari database dan diisi dalam model. Jika modelnya adalah JsonModel, makaJsonStrategy akan dipanggil dan akan menyandikan data sebagai json dan dikembalikan sebagai respons.

Itu $query->get('showJson') == 1digunakan untuk tujuan debugging. Tambahkan sajashowJson=1 di url dan halaman akan menampilkan data json.

Langkah 3: Tambahkan ajax.phtml

Sekarang, tambahkan skrip tampilan ajax.phtmluntuk metode ajaxAction. Halaman ini akan memiliki link dengan label -Load book information.

Mengklik link tersebut akan melakukan permintaan AJAX, yang akan mengambil informasi buku sebagai data Json dan menampilkan informasi buku sebagai tabel yang diformat. Pemrosesan AJAX dilakukan menggunakan fileJQuery.

Daftar kode lengkapnya adalah sebagai berikut -

<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>