Ajax使用'；加载'；消息 - Ajax loading data from controller in view with 'loading' message

现在我正在从控制器中的cURL加载数据，并将其显示在视图文件中，但从cURL加载需要很长时间，所以我的webiste加载也很长。

我想创建加载效果，只需用"正在加载，请稍候"消息加载我的所有页面，直到cURL数据可用，然后隐藏加载消息并显示我的数据。

我该怎么做？

我的代码：

控制器：

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是控制器中的$json['data']。

视图：

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

谨致问候。

可以应用的一种方法是使用Ajax

AJAX是异步JavaScript和XML的缩写，该技术帮助我们在不刷新浏览器页面的情况下从服务器加载数据。在您的情况下，一旦加载了javascript ajax文件，您就向控制器所在的路由发送一个ajax调用。在控制器中，您可以返回JSON、XML、HTML等格式的数据，。。。在success回调函数（如果请求成功，将调用该函数）中，您将从服务器获取数据作为第一个参数，然后可以隐藏等待并将获取的数据附加到DOM元素。
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:

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

下面是一个你可能会觉得有助于理解的例子http://jsfiddle.net/tg5op333/21/