№9 Dars - Yiida ajax so`rovlari bilan ishlash.

№9 Dars - Yiida ajax so`rovlari bilan ishlash.

Ajax so`rovlari bilan ishlash unumli ishlardan biri hisoblanib, web ilovamizni qayta yuklanishsiz serverga so`rov yubora oladigan xususiyatga ega. Yii ham o`zining ajax so`rovlari bilan ishlash uchun maxsus tehnologiyalar ishlab chiqgan. Bu haqida batafsil va samarali usul deb, misollar orqali tushuntirish deb bildik.

Keling birinchi misol bilan tanishaylik. Bu misol hozirgi vaqtni olish misolidir. Buning uchun index.php viewimizga quyidagicha kod yozamiz:

/protected/views/site/index.php

<?php
        // bu bootstrap qurilmasi hisoblanib, buni ishlatishda bootstrap o`rnatgan bo`lishingiz kerak                 
       // yoki bo`lmasam yii ning maxsus buttonidan foydalansangiz ham bo`ladi. 
        $this->widget('bootstrap.widgets.TbButton',array(
                // buttonning texti bo`lib, uni 'VaqtMessage' messagesidan tarjima qilib olmoqda.
                'label' => Yii::t('VaqtMessage', 'Hozir'),
                'type' => 'primary',
                'size' => 'medium',
                'url'=>array('#'),
                'htmlOptions'=>array(
                    // shu button uchun event biriktirmoqdamiz.
                    'onclick'=>' 
                        vaqtniolish();
                        return false;'
                    ),
                    ));
      ?>
<script type="text/javascript">
function vaqtniolish()
       {  // script kod ichida php kod yozish imkoni mavjud va quyidagicha yii kodini kiritamiz
        <?php echo CHtml::ajax(array(
            'url'=>array('site/vaqtniOlish'),  // berilgan url bo`yicha serverga murojaat
            'type'=>'post',      //  metod turi
            'dataType'=>'json',
            'success'=>"function(data){
                if(data.status == 'success')
                    {
                           //  shu keltirilgan "id" da  qaytgan qiymatni chiqarish.
                           $( '#req_res' ).html(data.qiymat);
                    }
                if(data.status == 'exist')
                    {
                        alert('xato');
                    }
                }",
                ))
        ?>;
        return false;
    }
</script>
<div id="req_res">...</div>

/protected/controllers/site.php

public function actionVaqtniOlish() {
  $date = date('Y-m-d H:i:s');
  if(!empty($date))
  {
   echo CJSON::encode( array(
    'status' => 'success',
    'qiymat' => $date,
   ));
  }
  else
  {
   echo CJSON::encode( array(
    'status' => 'exist',
   )); 
  }
  Yii::app()->end();
 }

Endi ko`rib turganingizdek natijalar xech qanday web ilovangiz qayta yuklanmay natija qaytarmoqda. Endi ikkinchi misol bilan tanishamiz. Bu misol qiymatni serverga yuborib natijani olishdan iborat. Buning uchun quyidagicha index.php viewimizga kod kiritamiz:

/protected/views/site/index.php

<input type="text" name="text" id="salom"/>
<?php $this->widget('bootstrap.widgets.TbButton',array(
                'label' => Yii::t('Message', 'Qiymat qaytarish'),
                'type' => 'primary',
                'size' => 'medium',
                'url'=>array('#'),
                'htmlOptions'=>array(
                    'onclick'=>' 
                     var qiymat = $( "input:text[name=text]" ).val();
  // text maydonidagi qiymatni o`zgaruvchiga olish
                        vaqtniolish(qiymat);
                        return false;'
                    ),
                    ));            ?>
<script type="text/javascript">
function vaqtniolish(qiymat)
   { 
     <?php echo CHtml::ajax(array(
         'url'=>array('site/qiymatqaytarish'),
         'type'=>'post',
         // berilgan url bo`yicha datasi ham berib yuborilmoqda POST metodi bo`yicha 
         'data'=>array('qiymat'=>'js:qiymat'),
          'dataType'=>'json',        
                    'success'=>"function(data){
             if(data.status == 'success')
                 {
                     $( '#req_res' ).html(data.value);
                 }
            }",
             ))
     ?>;
     return false;
 }
</script>
<div id="req_res">...</div>

Kontrollerimizga quyidagicha kod kiritamiz:

/protected/controllers/site.php

public function actionQiymatqaytarish() {
   // kelgan POST metodidagi qiymatni o`zgaruvchiga o`qib olish
   $qiymat = $_POST['qiymat'];
   echo CJSON::encode( array(
    'status' => 'success',
    'value' => $qiymat,
   ));
  Yii::app()->end();
 }

bu kodda kelgan POST metodidagi qiymatni olib uni view saxifamizga qayta berib yubormoqdamiz. Ko`rayotgan bo`lsangiz ikkala misolimizda ham JSON qiymat qaytarmoqdamiz shuning ushun bu qiymatlarni o`qish uchun js kodimizga "dataType"=>"json" deb berib qo`ymoqdamiz. Natija ko`rganingizdek kiritgan yozuvingizni chiqarmoqda.

Albatta ajax tehnologiyasi bilan ishlash yo`llari va turlari ko`p bular haqida keyingi bloglarimizda batafsil yana tanishtirib boramiz.

Ilm olamiga bo`lgan sayohatingiz xayrli bo`lsin.

Manba:


JONNY - Texnoman foydalanuvchisi

Muallif haqida

JONNY Arduino, Java, C#, Android, Windows, Linux, Debian, Javascript. O'zbekistonni rivojlantiramiz! Dasturlash orqali vatanimizni yangi marralarga olib chiqamiz.


Blogdagi so‘nggi maqolalar:


Birinchi bo‘ling!

Iltimos, fikr bildirish uchun saytga kiring yoki ro‘yxatdan o‘ting!