Ajax denetleyiciden veri yükleme 'loading' iletisiyle görüntüleniyor

Question

Şimdi denetleyicimdeki cURL'den veri yüklüyorum ve benim görünüm dosyamda gösteriyorum ancak cURL'den yükleme uzun zaman alıyor, bu yüzden webiste çok uzun yükleniyor.

Yükleme efekti oluşturmak istiyorum, sadece tüm sayfamı "Yükleme, lütfen bekleyin" ile yükleyin. CURL verisine kadar mesaj alınacak ve mesaj yüklendikten sonra veriyi göstereceğim.

Bunu nasıl yapmalıyım?

Kodum:

Denetleyici: görünümünde

public function open_inventory($steam_id, $appid = 730, $contextid = 2) 
{ 
    $data = array("steamid" => $steam_id, "appid" => $appid); 

    $cache_file = $this->config->item('inv_dir')."/".$data['steamid']."_".$data['appid'].".json"; 

    if (file_exists($cache_file) && (filemtime($cache_file) > (time() - 60 * 60))) // 1 hour cache 
    { 
     $output = file_get_contents($cache_file); 
    } 
    else 
    { 
     // out-of-date 
     $data_string = json_encode($data);                     

     $ch = curl_init('http://localhost:3000');                  
     curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");                  
     curl_setopt($ch, CURLOPT_POSTFIELDS, $data_string);                 
     curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);                  
     curl_setopt($ch, CURLOPT_HTTPHEADER, array(                   
      'Content-Type: application/json', 
      'Content-Length: ' . strlen($data_string)) 
     ); 
     $output = curl_exec($ch); 

     file_put_contents($cache_file, $output, LOCK_EX); 
    } 

    $json = json_decode($output,true); 

    if($json['data']) 
    { 
     return $json; 
    } 

    return false; 
} 

$items denetleyicisi $json['data'] olduğunu.

Görünüm:

<?php foreach ($items as $item): ?> 
    <div class="item-slot animated zoomIn" data-id="<?= $item['id'] ?> 
     <p><?= $item['name'] ?></p> 
    </div> 
<?php endforeach; ?> 

Selamlar.

Answer 1

Uygulayabileceğiniz bir yaklaşım Ajax kullanıyor.

AJAX bir Asenkron JavaScript için ayakta kısaltma ve XML ve bu teknoloji bizi bir tarayıcı sayfasını yenilemeden sunucudan veri yüklemek için yardımcı olur. Durumunuzda javascript ajax dosyası yüklendikten sonra, kontrol cihazınızın bulunduğu rotaya bir Ajax çağrısı gönderirsiniz. Kontrol ünitenizde JSON, XML, HTML, ... ve başarılı geri arama işlevlerinde veri döndürebilirsiniz. isteğin başarılı olması durumunda çağrılacak bir işlev), verilerinizi sunucudan ilk parametre olarak alırsınız, ardından beklemenizi gizleyebilir ve DOM öğesine aldığınız verileri ekleyebilirsiniz.
HTML:

<div id="wait-container"> 
    Please wait.... 
    <div class="spinner"> 
    </div> 
</div> 
<div id="items"></div> 

JS:

$(function(){ 
    // data that you can send to the server 
    var data = {key1 :'value1',key2:'value2'} ; 
    console.log("Data :",data); 


     $.ajax({ url: '/path_to_your_php_controller', //replace your url 
       data: data , 
       type: 'post', 
       dataType: "json", 
       success: function(response) { 
        //here hide wait-container 
        $("#wait-container").hide(); 
        console.log(response); 
        var string = ''; 
        $.map(response, function(val) { 
         // Generate Html 
         string += "<div class='item-slot animated zoomIn' data-id='" + val.id + "'><p>" + val.name + "</p></div>"; 
        }); 
         //add generated Html to the element. 
         $("#items").html(string); 

       }, 
       error: function(jqXHR, exception) { 
        if (jqXHR.status === 0) { 
         alert('Not connect.\n Verify Network.'); 
        } else if (jqXHR.status == 404) { 
         alert('Requested page not found. [404]'); 
        } else if (jqXHR.status == 500) { 
         alert('Internal Server Error [500].'); 
        } else if (exception === 'parsererror') { 
         alert('Requested JSON parse failed.'); 
        } else if (exception === 'timeout') { 
         alert('Time out error.'); 
        } else if (exception === 'abort') { 
         alert('Ajax request aborted.'); 
        } else { 
         alert('Uncaught Error.\n' + jqXHR.responseText); 
        } 
       } 
     }); 
}) 
$(document).on("click",".item-slot",function() { 
    alert($(this).data('id')); 
}); 

PHP: Burada

<?php 
    public function open_inventory() 
    { 
     // your code here 

     // array of object 
     $arr = array ({'id'=>123,'name'=>'name 1'},{'id'=>2345,'name'=>'name 2'},{'id'=>3423,'name'=>'name 3'},); 

     echo json_encode($arr); 
    } 

?> 

anlamak için yararlı olabilecek bir örnektir http://jsfiddle.net/tg5op333/21/